fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit b5427067f60adc79b8f5426c884ac7711cbca8c2 2 parents 81ec1b52 ae9f05d2

收藏商品

Inline Side-by-side
Showing 9 changed files with 471 additions and 163 deletions
@@ -36,7 +36,6 @@ const component = { @@ -36,7 +36,6 @@ const component = {
36 res.render('index', _.merge(result, data[1])); 36 res.render('index', _.merge(result, data[1]));
37 }).catch(next); 37 }).catch(next);
38 }, 38 },
39 -  
40 help: (req, res, next) => { 39 help: (req, res, next) => {
41 homeModel.getHelpInfo().then(helpList => { 40 homeModel.getHelpInfo().then(helpList => {
42 res.render('help', { 41 res.render('help', {
@@ -60,6 +59,49 @@ const component = { @@ -60,6 +59,49 @@ const component = {
60 helpDetail: helpDetail 59 helpDetail: helpDetail
61 }); 60 });
62 }).catch(next); 61 }).catch(next);
  62 + },
  63 + favorite: (req, res, next) => {
  64 + let tab = req.query.tab;
  65 + let testData = {
  66 + brandUrl: helpers.urlFormat('/product/new'),
  67 + productUrl: helpers.urlFormat('/product/new')
  68 + }
  69 + res.render('favorite', _.merge({
  70 + module: 'home',
  71 + page: 'favorite',
  72 + }, testData));
  73 + },
  74 + favpaging: (req, res, next) => {
  75 + let tab = req.query.tab;
  76 + let page = req.query.page;
  77 +
  78 + console.log("page: " + page);
  79 +
  80 + if (tab === 'brand') {
  81 +
  82 + }
  83 +
  84 + if (page > 3) return res.json([]);
  85 +
  86 + let testData = []
  87 + for (var i = 1; i <= 9; i++) {
  88 + testData.push({
  89 + fav_id: Number(page + i),
  90 + title: "商品名测试测试测试测试测试测试测试测试" + Number(page + i),
  91 + invalidGoods: true,
  92 + discountPrice: '¥' + 900,
  93 + price: '¥' + 990
  94 + })
  95 + }
  96 +
  97 + return res.json(testData);
  98 + },
  99 + favdel: (req, res, next) => {
  100 + let id = req.body.id;
  101 +
  102 + return res.json({
  103 + code: 200
  104 + });
63 } 105 }
64 }; 106 };
65 107
@@ -12,7 +12,13 @@ const home = require(cRoot); @@ -12,7 +12,13 @@ const home = require(cRoot);
12 12
13 // Your controller here 13 // Your controller here
14 router.get('/', home.index); // 个人中心主页 14 router.get('/', home.index); // 个人中心主页
  15 +
15 router.get('/help', home.help); // 帮助中心列表页 16 router.get('/help', home.help); // 帮助中心列表页
16 router.get('/helpDetail', home.helpDetail); // 帮助中心详情页 17 router.get('/helpDetail', home.helpDetail); // 帮助中心详情页
17 18
  19 +
  20 +router.get('/favorite', home.favorite); // 个人中心 - 收藏
  21 +router.get('/favorite/favpaging', home.favpaging); // 个人中心 - 收藏商品/品牌(翻页)
  22 +router.post('/favorite/favdel', home.favdel); // 个人中心 - 收藏商品/品牌(刪除)
  23 +
18 module.exports = router; 24 module.exports = router;
  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 +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 +.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 +@import "home";
1 @import "help"; 2 @import "help";
2 -  
3 -.my-page {  
4 - color: #444;  
5 - background: #f0f0f0;  
6 -  
7 - a {  
8 - color: #000;  
9 - }  
10 -  
11 - .user-info {  
12 - display: block;  
13 - position: relative;  
14 - padding: 0 30px;  
15 - color: #000;  
16 - font-size: 34px;  
17 - line-height: 138px;  
18 - height: 469px;  
19 - background-size: cover;  
20 - background: resolve("home/header-bg.png");  
21 - text-align: center;  
22 -  
23 - .user-avatar {  
24 - display: inline-block;  
25 - position: relative;  
26 - top: 90px;  
27 - width: 200px;  
28 - height: 200px;  
29 - border-radius: 50%;  
30 - border: 6px solid #a7a8a9;  
31 - background: resolve("home/user-icon.png");  
32 - background-size: 100%;  
33 - }  
34 -  
35 - .username {  
36 - display: inline-block;  
37 - padding: 0 16px;  
38 - text-overflow: ellipsis;  
39 - overflow: hidden;  
40 - white-space: nowrap;  
41 - font-size: 32px;  
42 - max-width: 260px;  
43 - }  
44 - }  
45 -  
46 - .login-btn {  
47 - display: inline-block;  
48 - top: 40px;  
49 - left: 194px;  
50 - width: 244px;  
51 - height: 82px;  
52 - line-height: 82px;  
53 - color: #fff;  
54 - border: 4px solid #fff;  
55 - margin: 150px auto;  
56 - }  
57 -  
58 - .my-order {  
59 - margin-bottom: 30px;  
60 - border-top: 1px solid #e0e0e0;  
61 - border-bottom: 1px solid #e0e0e0;  
62 - background: #fff;  
63 -  
64 - .order-title {  
65 - display: block;  
66 - padding: 0 29px;  
67 - font-size: 34px;  
68 - line-height: 88px;  
69 -  
70 - span {  
71 - color: #e0e0e0;  
72 - float: right;  
73 - }  
74 -  
75 - &.highlight {  
76 - background: #eee;  
77 - }  
78 -  
79 - .read-order {  
80 - font-size: 30px;  
81 - }  
82 - }  
83 -  
84 - .order-type {  
85 - padding: 20px 30px;  
86 - text-align: center;  
87 - border-top: 1px solid #e0e0e0;  
88 -  
89 - .type-item {  
90 - position: relative;  
91 - float: left;  
92 - color: #444;  
93 - font-size: 24px;  
94 - line-height: 1.5;  
95 - width: 170px;  
96 -  
97 - &.highlight {  
98 - background: #eee;  
99 - }  
100 -  
101 - .num {  
102 - position: absolute;  
103 - top: -24px;  
104 - right: 36px;  
105 - width: 72px;  
106 - height: 72px;  
107 - font-size: 34px;  
108 - line-height: 72px;  
109 - color: #fff;  
110 - background: #f03d35;  
111 - text-align: center;  
112 - border-radius: 50%;  
113 - transform: scale(0.5);  
114 - }  
115 - }  
116 - }  
117 - }  
118 -  
119 - .group-list {  
120 - margin-bottom: 30px;  
121 - border-top: 1px solid #e0e0e0;  
122 - border-bottom: 1px solid #e0e0e0;  
123 - background: #fff;  
124 -  
125 - .list-item {  
126 - display: block;  
127 - position: relative;  
128 - padding: 0 30px;  
129 - font-size: 34px;  
130 - line-height: 90px;  
131 - overflow: hidden;  
132 -  
133 - &.highlight {  
134 - background: #eee;  
135 - }  
136 -  
137 - &:after {  
138 - content: "";  
139 - position: absolute;  
140 - right: 0;  
141 - bottom: 0;  
142 - width: 100%;  
143 - height: 0;  
144 - border-top: 1px solid #f0f0f0;  
145 - }  
146 -  
147 - &:last-child:after {  
148 - content: none;  
149 - }  
150 - }  
151 -  
152 - .icon {  
153 - margin-right: 5px;  
154 - font-size: 34px;  
155 - vertical-align: top;  
156 - }  
157 -  
158 - .num {  
159 - color: #b0b0b0;  
160 - float: right;  
161 - }  
162 - }  
163 -} 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 +