fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit b8456e9b99906caf9acee31bfebb15ff283a2a13 2 parents 15278a32 b5427067

个人中心

Inline Side-by-side
Showing 17 changed files with 687 additions and 184 deletions
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 * @date: 2016/07/18 4 * @date: 2016/07/18
5 */ 5 */
6 'use strict'; 6 'use strict';
  7 +const homeModel = require('../models/index');
7 const _ = require('lodash'); 8 const _ = require('lodash');
8 const helpers = global.yoho.helpers; 9 const helpers = global.yoho.helpers;
9 10
@@ -12,20 +13,95 @@ const helpers = global.yoho.helpers; @@ -12,20 +13,95 @@ const helpers = global.yoho.helpers;
12 */ 13 */
13 const component = { 14 const component = {
14 index: (req, res, next) => { 15 index: (req, res, next) => {
15 - var testData = {  
16 - isLogin: false,  
17 - head_ico: '',  
18 - profile_name: 'XXX',  
19 - signinUrl: '/home',  
20 - wait_pay_num: 1,  
21 - wait_cargo_num: 2,  
22 - send_cargo_num: 3 16 + let uid = req.user.uid;
  17 + if (!uid && req.xhr) {
  18 + return res.json({
  19 + code: 400,
  20 + message: '抱歉，您暂未登录！'
  21 + });
  22 + }
  23 +
  24 + homeModel.getUserHomeData(uid).then(data => {
  25 + let result = {
  26 + module: 'home',
  27 + page: 'index',
  28 + head_ico: uid ? '' : '',
  29 + profile_name: uid ? 'James Sen' : '登录/注册',
  30 + userinfourl: uid ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
  31 + refer: req.originalUrl
  32 + }),
  33 + };
  34 +
  35 + res.render('index', _.merge(result, data[1]));
  36 + }).catch(next);
  37 + },
  38 + help: (req, res, next) => {
  39 + homeModel.getHelpInfo().then(helpList => {
  40 + res.render('help', {
  41 + module: 'home',
  42 + page: 'help',
  43 + helpList: helpList
  44 + });
  45 + }).catch(next);
  46 + },
  47 +
  48 + helpDetail: (req, res, next) => {
  49 + var helpDetailPara = {
  50 + code: req.query.code,
  51 + caption: req.query.caption
23 }; 52 };
24 - res.render('index', _.merge({ 53 +
  54 + homeModel.getHelpDetail(helpDetailPara).then(helpDetail => {
  55 + res.render('help-detail', {
  56 + module: 'home',
  57 + page: 'help',
  58 + helpDetail: helpDetail
  59 + });
  60 + }).catch(next);
  61 + },
  62 + favorite: (req, res, next) => {
  63 + let tab = req.query.tab;
  64 + let testData = {
  65 + brandUrl: helpers.urlFormat('/product/new'),
  66 + productUrl: helpers.urlFormat('/product/new')
  67 + }
  68 + res.render('favorite', _.merge({
25 module: 'home', 69 module: 'home',
26 - page: 'index' 70 + page: 'favorite',
27 }, testData)); 71 }, testData));
  72 + },
  73 + favpaging: (req, res, next) => {
  74 + let tab = req.query.tab;
  75 + let page = req.query.page;
  76 +
  77 + console.log("page: " + page);
  78 +
  79 + if (tab === 'brand') {
  80 +
  81 + }
  82 +
  83 + if (page > 3) return res.json([]);
  84 +
  85 + let testData = []
  86 + for (var i = 1; i <= 9; i++) {
  87 + testData.push({
  88 + fav_id: Number(page + i),
  89 + title: "商品名测试测试测试测试测试测试测试测试" + Number(page + i),
  90 + invalidGoods: true,
  91 + discountPrice: '¥' + 900,
  92 + price: '¥' + 990
  93 + })
  94 + }
  95 +
  96 + return res.json(testData);
  97 + },
  98 + favdel: (req, res, next) => {
  99 + let id = req.body.id;
  100 +
  101 + return res.json({
  102 + code: 200
  103 + });
28 } 104 }
29 }; 105 };
30 106
31 -module.exports = component; 107 +module.exports = component;
  1 +'use strict';
  2 +const api = global.yoho.API;
  3 +const Promise = require('bluebird');
  4 +const co = Promise.coroutine;
  5 +const _ = require('lodash');
  6 +const helpers = global.yoho.helpers;
  7 +
  8 +/**
  9 + * 处理用户个人详情数据
  10 + *
  11 + * @param int uid 用户ID
  12 + * @return Object 处理之后的个人详情数据
  13 + */
  14 +const _getUserProfileData = (uid) => {
  15 + return co(function*() {
  16 + // 调用接口获取个人详情
  17 + const data = {};
  18 + return data;
  19 +
  20 + // return api.get('operations/api/v5/resource/get', {
  21 + // uid: uid
  22 + // }, {
  23 + // cache: true,
  24 + // code: 200
  25 + // });
  26 + })();
  27 +};
  28 +
  29 +/**
  30 + * 处理个人中心页面优惠券，收藏的商品等的数目数据
  31 + *
  32 + * @param int uid 用户ID
  33 + * @return Object 处理之后的个人中心页面收藏的商品等的数目数据
  34 + */
  35 +const _getInfoNumData = (uid) => {
  36 + return co(function*() {
  37 + const data = {
  38 + wait_pay_num: 1,
  39 + wait_cargo_num: 2,
  40 + send_cargo_num: 3,
  41 + address_num: 4,
  42 + product_favorite_total: 5,
  43 + brand_favorite_total: 6,
  44 + yoho_coin_num: 7
  45 + };
  46 + return data;
  47 + })();
  48 +
  49 +};
  50 +
  51 +exports.getUserHomeData = (uid) => {
  52 + return Promise.all([_getUserProfileData(uid), _getInfoNumData(uid)]);
  53 +};
  54 +
  55 +const helpListDataProc = (helpData) => {
  56 + const formatData = [];
  57 +
  58 + helpData = helpData || [];
  59 + _.forEach(helpData, (item) => {
  60 + formatData.push({
  61 + name: item.caption,
  62 + code: item.code,
  63 + url: helpers.urlFormat('/home/helpDetail', {
  64 + code: item.code,
  65 + caption: item.caption,
  66 + })
  67 + });
  68 + });
  69 + return formatData;
  70 +};
  71 +
  72 +
  73 +
  74 +/**
  75 + * 帮助中心列表页
  76 + *
  77 + * @param data
  78 + *
  79 + */
  80 +exports.getHelpInfo = (data) => {
  81 + var defaultParam = {
  82 + method: 'app.help.li'
  83 + },
  84 + infoData = Object.assign(defaultParam, data);
  85 +
  86 + return api.get('', infoData).then(result => {
  87 +
  88 + return helpListDataProc(result.data);
  89 + });
  90 +};
  91 +
  92 +/**
  93 + * 帮助中心详情页
  94 + *
  95 + * @param data
  96 + */
  97 +exports.getHelpDetail = (data) => {
  98 + var defaultParam = {
  99 + method: 'app.help.detail',
  100 + return_type: 'html'
  101 + },
  102 + detailData = Object.assign(defaultParam, data);
  103 +
  104 + return api.get('', detailData).then(result => {
  105 + return result;
  106 + });
  107 +};
  108 +
@@ -13,4 +13,12 @@ const home = require(cRoot); @@ -13,4 +13,12 @@ const home = require(cRoot);
13 // Your controller here 13 // Your controller here
14 router.get('/', home.index); // 个人中心主页 14 router.get('/', home.index); // 个人中心主页
15 15
16 -module.exports = router; 16 +router.get('/help', home.help); // 帮助中心列表页
  17 +router.get('/helpDetail', home.helpDetail); // 帮助中心详情页
  18 +
  19 +
  20 +router.get('/favorite', home.favorite); // 个人中心 - 收藏
  21 +router.get('/favorite/favpaging', home.favpaging); // 个人中心 - 收藏商品/品牌(翻页)
  22 +router.post('/favorite/favdel', home.favdel); // 个人中心 - 收藏商品/品牌(刪除)
  23 +
  24 +module.exports = router; >>> >>> > feature / home
  1 +<div class="yoho-favorite-page yoho-page">
  2 + <div class="fav-content" id="fav-content">
  3 + <fav-product-list product-url={{productUrl}}></fav-product-list>
  4 + </div>
  5 +</div>
  1 +<div class="help">
  2 + <ul>
  3 + {{# helpList}}
  4 + <li><a href="{{url}}"><span>{{ name}}</span><i class="icon num">&#xe607;</i></a></li>
  5 + {{/ helpList}}
  6 + </ul>
  7 +</div>
1 <div class="my-page yoho-page"> 1 <div class="my-page yoho-page">
2 <div class="my-header"> 2 <div class="my-header">
3 - {{#isLogin}}  
4 - <a class="user-info" href="/home/mydetails"> 3 + <a class="user-info" href={{userinfourl}}>
5 <span class="user-avatar" data-avatar="{{head_ico}}"></span> 4 <span class="user-avatar" data-avatar="{{head_ico}}"></span>
6 <br><span class="username">{{profile_name}}</span> 5 <br><span class="username">{{profile_name}}</span>
7 </a> 6 </a>
8 - {{/isLogin}}  
9 - {{^isLogin}}  
10 - <div class="user-info">  
11 - <a class="login-btn" href="{{signinUrl}}">  
12 - 登录/注册  
13 - </a>  
14 - </div>  
15 - {{/isLogin}}  
16 </div> 7 </div>
17 <div class="my-order"> 8 <div class="my-order">
18 <a class="order-title" href="/home/orders"> 9 <a class="order-title" href="/home/orders">
19 我的订单 10 我的订单
20 - <span> 11 + <span class="read-order">
21 查看全部订单 <span class="icon icon-right"></span> 12 查看全部订单 <span class="icon icon-right"></span>
22 </span> 13 </span>
23 </a> 14 </a>
@@ -55,23 +46,23 @@ @@ -55,23 +46,23 @@
55 <div class="group-list"> 46 <div class="group-list">
56 <a class="list-item" href="/home/address"> 47 <a class="list-item" href="/home/address">
57 地址管理 48 地址管理
58 - <span class="num">3 <span class="icon icon-right"></span></span> 49 + <span class="num">{{address_num}} <span class="icon icon-right"></span></span>
59 </a> 50 </a>
60 </div> 51 </div>
61 <div class="group-list"> 52 <div class="group-list">
62 <a class="list-item" href="/home/favorite"> 53 <a class="list-item" href="/home/favorite">
63 收藏的商品 54 收藏的商品
64 - <span class="num">120 <span class="icon icon-right"></span></span> 55 + <span class="num">{{product_favorite_total}} <span class="icon icon-right"></span></span>
65 </a> 56 </a>
66 <a class="list-item" href="/home/favorite?tab=brand"> 57 <a class="list-item" href="/home/favorite?tab=brand">
67 收藏的品牌 58 收藏的品牌
68 - <span class="num">100 <span class="icon icon-right"></span></span> 59 + <span class="num">{{brand_favorite_total}} <span class="icon icon-right"></span></span>
69 </a> 60 </a>
70 </div> 61 </div>
71 <div class="group-list"> 62 <div class="group-list">
72 <a class="list-item" href="/home/mycurrency"> 63 <a class="list-item" href="/home/mycurrency">
73 YOHO 币 64 YOHO 币
74 - <span class="num">100 <span class="icon icon-right"></span></span> 65 + <span class="num">{{yoho_coin_num}} <span class="icon icon-right"></span></span>
75 </a> 66 </a>
76 </div> 67 </div>
77 <div class="group-list"> 68 <div class="group-list">
  1 +const Vue = require('yoho-vue');
  2 +const infiniteScroll = require('yoho-vue-infinite-scroll');
  3 +const ProductList = require('home/fav-product-list.vue');
  4 +
  5 +Vue.use(infiniteScroll)
  6 +
  7 +new Vue({
  8 + el: '#fav-content',
  9 + components: {
  10 + 'fav-product-list': ProductList
  11 + }
  12 +});
  1 +.yoho-favorite-page {
  2 + width: 100%;
  3 + height: auto;
  4 +
  5 + .fav-content {
  6 + .fav-type {
  7 + display: none;
  8 + }
  9 + .show {
  10 + display: block;
  11 + }
  12 +
  13 + .fav-null {
  14 + font-size: 22px;
  15 + color: #444;
  16 + display: block;
  17 + margin-top: 100px;
  18 + text-align: center;
  19 +
  20 + &:before {
  21 + content: '';
  22 + display: block;
  23 + width: 188px;
  24 + height: 171px;
  25 + background: resolve("home/fav/fav-null.png");
  26 + background-size: 100% 100%;
  27 + margin: 0 auto 45px auto;
  28 + }
  29 + }
  30 +
  31 + .go-shopping {
  32 + width: 472px;
  33 + height: 88px;
  34 + line-height: 88px;
  35 + margin: 80px auto 0 auto;
  36 + background: #444;
  37 + text-align: center;
  38 + color: #fff;
  39 + display: block;
  40 + font-size: 26px;
  41 + border-radius:.2rem;
  42 + }
  43 +
  44 + .fav-product-list {
  45 + list-style: none;
  46 +
  47 + li {
  48 + height: auto;
  49 + overflow: hidden;
  50 + margin-top: 20px;
  51 + }
  52 +
  53 + .fav-del {
  54 + float: left;
  55 + display: none;
  56 + }
  57 +
  58 + .show {
  59 + display: block;
  60 + }
  61 +
  62 + .delhide {
  63 + display: block;
  64 + }
  65 +
  66 + .fav-img-box {
  67 + width: 152px;
  68 + height: 203px;
  69 + float: left;
  70 + margin-right: 24px;
  71 +
  72 + img {
  73 + display: block;
  74 + overflow: hidden;
  75 + width: 100%;
  76 + height: 100%;
  77 + }
  78 + }
  79 +
  80 + .fav-info-list {
  81 + color: #444;
  82 + font-size: 24px;
  83 + border-bottom: 1px solid #e0e0e0;
  84 + padding-bottom: 20px;
  85 + margin-right: 5px;
  86 + height: 203px;
  87 + overflow: hidden;
  88 + position: relative;
  89 +
  90 + .title {
  91 + width: 430px;
  92 + text-overflow: ellipsis;
  93 + font-size: 28px;
  94 + margin: 0;
  95 + }
  96 +
  97 + .fav-price {
  98 + margin-top: 20px;
  99 +
  100 + .new-price {
  101 + color: #d1021c;
  102 + font-size: 24px;
  103 + }
  104 +
  105 + .price-underline {
  106 + text-decoration: line-through;
  107 + margin-left: 15px;
  108 + color: #b0b0b0;
  109 + font-size: 24px;
  110 + }
  111 + }
  112 +
  113 + .save-price {
  114 + position: absolute;
  115 + bottom: 20px;
  116 + left: 0;
  117 + width: 100%;
  118 + min-height: 24px;
  119 +
  120 + span {
  121 + &.sell-out {
  122 + float: right;
  123 + padding: 5px 18px;
  124 + color: #b0b0b0;
  125 + border-radius: 20px;
  126 + font-size: 22px;
  127 + }
  128 + }
  129 + }
  130 + }
  131 + }
  132 + }
  133 +}
  1 +.help {
  2 + width: 100%;
  3 + height: auto;
  4 + overflow: hidden;
  5 + ul {
  6 + width: 100%;
  7 + height: auto;
  8 + overflow: hidden;
  9 + display: block;
  10 + border-top: 1px solid #e0e0e0;
  11 + padding-left: 0;
  12 + margin: 0;
  13 + li {
  14 + width: 100%;
  15 + height: 80px;
  16 + line-height: 84px;
  17 + overflow: hidden;
  18 + font-size: 28px;
  19 + border-bottom: 1px solid #e0e0e0;
  20 + float: right;
  21 + color: #444;
  22 + list-style: none;
  23 + &:last-of-type {
  24 + border-bottom: none;
  25 + }
  26 + a:visited {
  27 + color: #444;
  28 + }
  29 + span {
  30 + width: 90%;
  31 + height: 100%;
  32 + overflow: hidden;
  33 + float: left;
  34 + padding-left: 5%;
  35 + }
  36 + i {
  37 + color: #e0e0e0;
  38 + }
  39 + }
  40 + }
  41 + .iconfont {
  42 + color: #fff;
  43 + }
  44 +
  45 +}
  1 +.my-page {
  2 + color: #444;
  3 + background: #f0f0f0;
  4 +
  5 + a {
  6 + color: #000;
  7 + }
  8 +
  9 + .user-info {
  10 + display: block;
  11 + position: relative;
  12 + padding: 0 30px;
  13 + color: #000;
  14 + font-size: 34px;
  15 + line-height: 138px;
  16 + height: 469px;
  17 + background-size: cover;
  18 + background: resolve("home/header-bg.png");
  19 + text-align: center;
  20 +
  21 + .user-avatar {
  22 + display: inline-block;
  23 + position: relative;
  24 + top: 90px;
  25 + width: 200px;
  26 + height: 200px;
  27 + border-radius: 50%;
  28 + border: 6px solid #a7a8a9;
  29 + background: resolve("home/user-icon.png");
  30 + background-size: 100%;
  31 + }
  32 +
  33 + .username {
  34 + display: inline-block;
  35 + padding: 0 16px;
  36 + text-overflow: ellipsis;
  37 + overflow: hidden;
  38 + white-space: nowrap;
  39 + font-size: 32px;
  40 + max-width: 260px;
  41 + }
  42 + }
  43 +
  44 + .login-btn {
  45 + display: inline-block;
  46 + top: 40px;
  47 + left: 194px;
  48 + width: 244px;
  49 + height: 82px;
  50 + line-height: 82px;
  51 + color: #fff;
  52 + border: 4px solid #fff;
  53 + margin: 150px auto;
  54 + }
  55 +
  56 + .my-order {
  57 + margin-bottom: 30px;
  58 + border-top: 1px solid #e0e0e0;
  59 + border-bottom: 1px solid #e0e0e0;
  60 + background: #fff;
  61 +
  62 + .order-title {
  63 + display: block;
  64 + padding: 0 29px;
  65 + font-size: 34px;
  66 + line-height: 88px;
  67 +
  68 + span {
  69 + color: #e0e0e0;
  70 + float: right;
  71 + }
  72 +
  73 + &.highlight {
  74 + background: #eee;
  75 + }
  76 +
  77 + .read-order {
  78 + font-size: 30px;
  79 + }
  80 + }
  81 +
  82 + .order-type {
  83 + padding: 20px 30px;
  84 + text-align: center;
  85 + border-top: 1px solid #e0e0e0;
  86 +
  87 + .type-item {
  88 + position: relative;
  89 + float: left;
  90 + color: #444;
  91 + font-size: 24px;
  92 + line-height: 1.5;
  93 + width: 170px;
  94 +
  95 + &.highlight {
  96 + background: #eee;
  97 + }
  98 +
  99 + .num {
  100 + position: absolute;
  101 + top: -24px;
  102 + right: 36px;
  103 + width: 72px;
  104 + height: 72px;
  105 + font-size: 34px;
  106 + line-height: 72px;
  107 + color: #fff;
  108 + background: #f03d35;
  109 + text-align: center;
  110 + border-radius: 50%;
  111 + transform: scale(0.5);
  112 + }
  113 + }
  114 + }
  115 + }
  116 +
  117 + .group-list {
  118 + margin-bottom: 30px;
  119 + border-top: 1px solid #e0e0e0;
  120 + border-bottom: 1px solid #e0e0e0;
  121 + background: #fff;
  122 +
  123 + .list-item {
  124 + display: block;
  125 + position: relative;
  126 + padding: 0 30px;
  127 + font-size: 34px;
  128 + line-height: 90px;
  129 + overflow: hidden;
  130 +
  131 + &.highlight {
  132 + background: #eee;
  133 + }
  134 +
  135 + &:after {
  136 + content: "";
  137 + position: absolute;
  138 + right: 0;
  139 + bottom: 0;
  140 + width: 100%;
  141 + height: 0;
  142 + border-top: 1px solid #f0f0f0;
  143 + }
  144 +
  145 + &:last-child:after {
  146 + content: none;
  147 + }
  148 + }
  149 +
  150 + .icon {
  151 + margin-right: 5px;
  152 + font-size: 34px;
  153 + vertical-align: top;
  154 + }
  155 +
  156 + .num {
  157 + color: #b0b0b0;
  158 + float: right;
  159 + }
  160 + }
  161 +}
1 -.my-page {  
2 - color: #444;  
3 - background: #f0f0f0;  
4 -  
5 - a {  
6 - color: #444;  
7 - }  
8 -  
9 - .user-info {  
10 - display: block;  
11 - position: relative;  
12 - padding: 0 30px;  
13 - color: #fff;  
14 - font-size: 34px;  
15 - line-height: 138px;  
16 - height: 449px;  
17 - background-size: cover;  
18 - background: #444;  
19 - /*background: resolve("home/header-bg.jpg"); */  
20 - text-align: center;  
21 -  
22 - .user-avatar {  
23 - display: inline-block;  
24 - position: relative;  
25 - top: 88px;  
26 - width: 200px;  
27 - height: 200px;  
28 - border-radius: 50%;  
29 - border: 6px solid #a7a8a9;  
30 - background: #a7a8a9;  
31 - background-size: 100%;  
32 - }  
33 -  
34 - .username {  
35 - display: inline-block;  
36 - padding: 0 16px;  
37 - text-overflow: ellipsis;  
38 - overflow: hidden;  
39 - white-space: nowrap;  
40 - max-width: 260px;  
41 - }  
42 - }  
43 -  
44 - .login-btn {  
45 - display: inline-block;  
46 - top: 40px;  
47 - left: 194px;  
48 - width: 244px;  
49 - height: 82px;  
50 - line-height: 82px;  
51 - color: #fff;  
52 - border: 4px solid #fff;  
53 - margin: 120px auto;  
54 - }  
55 -  
56 - .my-order {  
57 - margin-bottom: 30px;  
58 - border-top: 1px solid #e0e0e0;  
59 - border-bottom: 1px solid #e0e0e0;  
60 - background: #fff;  
61 -  
62 - .order-title {  
63 - display: block;  
64 - padding: 0 30px;  
65 - font-size: 16PX;  
66 - line-height: 88px;  
67 -  
68 - span {  
69 - color: #e0e0e0;  
70 - float: right;  
71 - }  
72 -  
73 - &.highlight {  
74 - background: #eee;  
75 - }  
76 - }  
77 -  
78 - .order-type {  
79 - padding: 20px 30px;  
80 - text-align: center;  
81 - border-top: 1px solid #e0e0e0;  
82 -  
83 - .type-item {  
84 - position: relative;  
85 - float: left;  
86 - color: #444;  
87 - font-size: 14PX;  
88 - line-height: 1.5;  
89 - width: 170px;  
90 -  
91 - &.highlight {  
92 - background: #eee;  
93 - }  
94 -  
95 - .num {  
96 - position: absolute;  
97 - top: -24px;  
98 - right: 36px;  
99 - width: 72px;  
100 - height: 72px;  
101 - font-size: 40px;  
102 - line-height: 72px;  
103 - color: #fff;  
104 - background: #f03d35;  
105 - text-align: center;  
106 - border-radius: 50%;  
107 - transform: scale(0.5);  
108 - }  
109 - }  
110 - }  
111 - }  
112 -  
113 - .group-list {  
114 - margin-bottom: 30px;  
115 - border-top: 1px solid #e0e0e0;  
116 - border-bottom: 1px solid #e0e0e0;  
117 - background: #fff;  
118 -  
119 - .list-item {  
120 - display: block;  
121 - position: relative;  
122 - padding: 0 30px;  
123 - font-size: 16PX;  
124 - line-height: 90px;  
125 -  
126 - &.highlight {  
127 - background: #eee;  
128 - }  
129 -  
130 - &:after {  
131 - content: '';  
132 - position: absolute;  
133 - right: 0;  
134 - bottom: 0;  
135 - width: 100%;  
136 - height: 0;  
137 - border-top: 1px solid #f0f0f0;  
138 - }  
139 -  
140 - &:last-child:after {  
141 - content: none;  
142 - }  
143 - }  
144 -  
145 - .icon {  
146 - margin-right: 5px;  
147 - font-size: 30px;  
148 - vertical-align: top;  
149 - }  
150 -  
151 - .num {  
152 - color: #e0e0e0;  
153 - float: right;  
154 - }  
155 - }  
156 -} 1 +@import "home";
  2 +@import "help";
  3 +@import "fav";
  1 +<template>
  2 + <div class="fav-type show" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  3 + <ul class="fav-product-list">
  4 + <li v-for="item in productData" track-by="fav_id">
  5 + <div class="fav-del {{editmodel ? 'show': ''}}">
  6 + <button @click="delProduct($index, item.fav_id)">删除</button>
  7 + </div>
  8 + <a :href="item.link">
  9 + <div class="fav-img-box">
  10 + <img :src="item.imgUrl" alt=""/>
  11 + </div>
  12 + <div class="fav-info-list">
  13 + <span class="title">{{item.title}}</span>
  14 + <br/>
  15 + <div class="fav-price">
  16 + <span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
  17 + <span class="fav-price {{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
  18 + </div>
  19 + <br/>
  20 + <div class="save-price">
  21 + <span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
  22 + </div>
  23 + </div>
  24 + </a>
  25 + </li>
  26 + </ul>
  27 + <div class="fav-null-box {{ nullbox }}">
  28 + <span class="fav-null">您暂无收藏任何商品}}</span>
  29 + <a slot="go-shopping" class="go-shopping" :href="productUrl">随便逛逛</a>
  30 + </div>
  31 + </div>
  32 +</template>
  33 +
  34 +<script>
  35 + const $ = require('yoho-jquery');
  36 + const tip = require('common/tip');
  37 + const Loading = require('common/loading');
  38 + const modal = require('common/modal');
  39 + const loading = new Loading();
  40 +
  41 + module.exports = {
  42 + props: ['productUrl'],
  43 + data() {
  44 + return {
  45 + nullbox : 'hide',
  46 + busy: false,
  47 + editmodel: false,
  48 + page: 0,
  49 + productData: []
  50 + };
  51 + },
  52 + methods: {
  53 + loadMore: function() {
  54 + loading.show();
  55 +
  56 + let _this = this;
  57 + this.busy = true;
  58 +
  59 + $.ajax({
  60 + url: '/home/favorite/favpaging',
  61 + data: {
  62 + page : ++_this.page
  63 + }
  64 + }).then(result => {
  65 + if (result.length) {
  66 + result.forEach(function(o){
  67 + _this.productData.push(o);
  68 + });
  69 + _this.busy = false;
  70 + } else {
  71 + _this.busy = true;
  72 + }
  73 +
  74 + _this.nullbox = _this.productData.length ? "hide" : "";
  75 + loading.hide();
  76 + }).fail(() => {
  77 + tip('网络错误');
  78 + });
  79 + },
  80 + editProduct(action) {
  81 + this.editmodel = action;
  82 + },
  83 + delProduct(index, id) {
  84 + let _this = this;
  85 + $.modal.confirm('', '确定刪除该收藏吗？', function() {
  86 + this.hide();
  87 + $.ajax({
  88 + method: 'post',
  89 + url: '/home/favorite/favdel',
  90 + data: {
  91 + id: id
  92 + }
  93 + }).then(function(data) {
  94 + if (data.code === 200) {
  95 + _this.productData.splice(index, 1);
  96 + } else if (data.code === 400) {
  97 + $.modal.alert(data.message, '出错了！');
  98 + } else {
  99 + $.modal.alert('', '取消收藏失败');
  100 + }
  101 + }).fail(function() {
  102 + $.modal.alert('', '网络错误');
  103 + });
  104 + });
  105 + }
  106 + }
  107 + };
  108 +</script>
  109 +