fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit 70cfac1ad696fd979312d68f7771918f7b578280 2 parents 16504bed a04883be

Merge branch 'feature/home' into develop

Inline Side-by-side
Showing 8 changed files with 316 additions and 73 deletions
@@ -65,32 +65,42 @@ const component = { @@ -65,32 +65,42 @@ const component = {
65 brandUrl: helpers.urlFormat('/product/new'), 65 brandUrl: helpers.urlFormat('/product/new'),
66 productUrl: helpers.urlFormat('/product/new') 66 productUrl: helpers.urlFormat('/product/new')
67 } 67 }
68 - res.render('favorite', _.merge({  
69 - module: 'home',  
70 - page: 'favorite',  
71 - }, testData)); 68 +
  69 + if (tab === 'brand') {
  70 + res.render('favorite-brand', _.merge({
  71 + module: 'home',
  72 + page: 'favorite-brand',
  73 + }, testData));
  74 + } else {
  75 + res.render('favorite', _.merge({
  76 + module: 'home',
  77 + page: 'favorite',
  78 + }, testData));
  79 + }
72 }, 80 },
73 favpaging: (req, res, next) => { 81 favpaging: (req, res, next) => {
74 let tab = req.query.tab; 82 let tab = req.query.tab;
75 let page = req.query.page; 83 let page = req.query.page;
76 84
77 - console.log("page: " + page);  
78 -  
79 - if (tab === 'brand') {  
80 -  
81 - }  
82 -  
83 - if (page > 3) return res.json([]); 85 + if (page > 2) return res.json([]);
84 86
85 let testData = [] 87 let testData = []
86 for (var i = 1; i <= 9; i++) { 88 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 - }) 89 + if (tab === 'brand') {
  90 + testData.push({
  91 + fav_id: Number(page + i),
  92 + brandName: "品牌名测试" + Number(page + i),
  93 + invalidGoods: true
  94 + })
  95 + } else {
  96 + testData.push({
  97 + fav_id: Number(page + i),
  98 + title: "商品名测试测试测试测试测试测试测试测试" + Number(page + i),
  99 + invalidGoods: true,
  100 + discountPrice: '¥' + 900,
  101 + price: '¥' + 990
  102 + })
  103 + }
94 } 104 }
95 105
96 return res.json(testData); 106 return res.json(testData);
  1 +<div class="yoho-favorite-brand-page">
  2 + <div class="fav-content" id="fav-content">
  3 + <fav-brand-list brand-url={{brandUrl}}></fav-brand-list>
  4 + </div>
  5 +</div>
1 -<div class="yoho-favorite-page yoho-page"> 1 +<div class="yoho-favorite-page">
2 <div class="fav-content" id="fav-content"> 2 <div class="fav-content" id="fav-content">
3 <fav-product-list product-url={{productUrl}}></fav-product-list> 3 <fav-product-list product-url={{productUrl}}></fav-product-list>
4 </div> 4 </div>
1 -<div class="my-page yoho-page"> 1 +<div class="my-page">
2 <div class="my-header"> 2 <div class="my-header">
3 <a class="user-info" href={{userinfourl}}> 3 <a class="user-info" href={{userinfourl}}>
4 <span class="user-avatar" data-avatar="{{head_ico}}"></span> 4 <span class="user-avatar" data-avatar="{{head_ico}}"></span>
  1 +const Vue = require('yoho-vue');
  2 +const infiniteScroll = require('yoho-vue-infinite-scroll');
  3 +const BrandList = require('home/fav-brand-list.vue');
  4 +
  5 +Vue.use(infiniteScroll)
  6 +
  7 +new Vue({
  8 + el: '#fav-content',
  9 + components: {
  10 + 'fav-brand-list': BrandList
  11 + }
  12 +});
@@ -4,63 +4,36 @@ @@ -4,63 +4,36 @@
4 4
5 .fav-content { 5 .fav-content {
6 .fav-type { 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; 7 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 } 8 }
43 9
44 .fav-product-list { 10 .fav-product-list {
  11 + padding-left: 20px;
45 list-style: none; 12 list-style: none;
46 13
47 li { 14 li {
48 - height: auto; 15 + height: 205px;
49 overflow: hidden; 16 overflow: hidden;
50 margin-top: 20px; 17 margin-top: 20px;
51 } 18 }
52 19
53 .fav-del { 20 .fav-del {
54 - float: left;  
55 - background: resolve("home/fav/fav-del.png");  
56 display: none; 21 display: none;
57 - } 22 + float: left;
  23 + width: 50px;
  24 + height: 100%;
58 25
59 - .show {  
60 - display: block; 26 + .fav-del-span {
  27 + display: inline-block;
  28 + width: 35px;
  29 + height: 35px;
  30 + margin-right: 15px;
  31 + margin-top: 90px;
  32 + background: resolve("home/fav/fav-del.png");
  33 + }
61 } 34 }
62 35
63 - .delhide { 36 + .delshow {
64 display: block; 37 display: block;
65 } 38 }
66 39
@@ -130,5 +103,154 @@ @@ -130,5 +103,154 @@
130 } 103 }
131 } 104 }
132 } 105 }
  106 +
  107 + .fav-null {
  108 + font-size: 22px;
  109 + color: #444;
  110 + display: block;
  111 + margin-top: 100px;
  112 + text-align: center;
  113 +
  114 + &:before {
  115 + content: '';
  116 + display: block;
  117 + width: 188px;
  118 + height: 171px;
  119 + background: resolve("home/fav/fav-null.png");
  120 + background-size: 100% 100%;
  121 + margin: 0 auto 45px auto;
  122 + }
  123 + }
  124 +
  125 + .go-shopping {
  126 + width: 472px;
  127 + height: 88px;
  128 + line-height: 88px;
  129 + margin: 80px auto 0 auto;
  130 + background: #444;
  131 + text-align: center;
  132 + color: #fff;
  133 + display: block;
  134 + font-size: 26px;
  135 + border-radius:.2rem;
  136 + }
  137 + }
  138 +}
  139 +
  140 +.yoho-favorite-brand-page {
  141 + width: 100%;
  142 + height: auto;
  143 +
  144 + .fav-content {
  145 + .fav-type {
  146 + display: block;
  147 + }
  148 +
  149 + .fav-brand-list {
  150 + padding-left: 20px;
  151 + list-style: none;
  152 +
  153 + li {
  154 + height: 130px;
  155 + overflow: hidden;
  156 + margin-top: 20px;
  157 + }
  158 +
  159 + .fav-del {
  160 + display: none;
  161 + float: left;
  162 + width: 50px;
  163 + height: 100%;
  164 +
  165 + .fav-del-span {
  166 + display: inline-block;
  167 + width: 35px;
  168 + height: 35px;
  169 + margin-right: 15px;
  170 + margin-top: 35px;
  171 + background: resolve("home/fav/fav-del.png");
  172 + }
  173 + }
  174 +
  175 + .delshow {
  176 + display: block;
  177 + }
  178 +
  179 + .fav-img-box {
  180 + width: 160px;
  181 + height: 125px;
  182 + float: left;
  183 + margin-right: 24px;
  184 +
  185 + img {
  186 + display: block;
  187 + overflow: hidden;
  188 + width: 100%;
  189 + height: 100%;
  190 + }
  191 + }
  192 +
  193 + .fav-info-list {
  194 + color: #444;
  195 + font-size: 24px;
  196 + border-bottom: 1px solid #e0e0e0;
  197 + padding-bottom: 20px;
  198 + margin-right: 10px;
  199 + margin-top: 35px;
  200 + height: 125px;
  201 + overflow: hidden;
  202 + position: relative;
  203 +
  204 + .title {
  205 + width: 430px;
  206 + color: #b0b0b0;
  207 + text-overflow: ellipsis;
  208 + font-size: 34px;
  209 + margin: 0;
  210 + }
  211 + }
  212 +
  213 + span {
  214 + &.down {
  215 + float: right;
  216 + padding: 5px 18px;
  217 + color: #fffefe;
  218 + background: #b0b0b0;
  219 + border-radius: 20px;
  220 + font-size: 22px;
  221 + }
  222 + }
  223 + }
  224 +
  225 + .fav-null {
  226 + font-size: 22px;
  227 + color: #444;
  228 + display: block;
  229 + margin-top: 100px;
  230 + text-align: center;
  231 +
  232 + &:before {
  233 + content: '';
  234 + display: block;
  235 + width: 188px;
  236 + height: 171px;
  237 + background: resolve("home/fav/fav-null.png");
  238 + background-size: 100% 100%;
  239 + margin: 0 auto 45px auto;
  240 + }
  241 + }
  242 +
  243 + .go-shopping {
  244 + width: 472px;
  245 + height: 88px;
  246 + line-height: 88px;
  247 + margin: 80px auto 0 auto;
  248 + background: #444;
  249 + text-align: center;
  250 + color: #fff;
  251 + display: block;
  252 + font-size: 26px;
  253 + border-radius:.2rem;
  254 + }
133 } 255 }
134 } 256 }
  1 +<template>
  2 + <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  3 + <ul class="fav-brand-list">
  4 + <li v-for="item in brandData" track-by="fav_id">
  5 + <div class="fav-del {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
  6 + <span class="fav-del-span"></span>
  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.brandName}}</span>
  14 + <span class="down" v-if="item.invalidGoods">品牌已下架</span>
  15 + </div>
  16 + </a>
  17 + </li>
  18 + </ul>
  19 + <div class="fav-null-box {{ nullbox }}">
  20 + <span class="fav-null">您暂无收藏任何品牌</span>
  21 + <a slot="go-shopping" class="go-shopping" :href="brandUrl">随便逛逛</a>
  22 + </div>
  23 + </div>
  24 +</template>
  25 +
  26 +<script>
  27 + const $ = require('yoho-jquery');
  28 + const tip = require('common/tip');
  29 + const modal = require('common/modal');
  30 + const loading = require('common/loading');
  31 +
  32 + module.exports = {
  33 + props: ['brandUrl'],
  34 + data() {
  35 + return {
  36 + nullbox : 'hide',
  37 + busy: false,
  38 + editmodel: false,
  39 + page: 0,
  40 + brandData: []
  41 + };
  42 + },
  43 + methods: {
  44 + loadMore: function() {
  45 + let _this = this;
  46 + this.busy = true;
  47 +
  48 + $.ajax({
  49 + url: '/home/favorite/favpaging',
  50 + data: {
  51 + page : ++_this.page,
  52 + tab : "brand"
  53 + }
  54 + }).then(result => {
  55 + if (result.length) {
  56 + result.forEach(function(o){
  57 + _this.brandData.push(o);
  58 + });
  59 + _this.busy = false;
  60 + } else {
  61 + _this.busy = true;
  62 + }
  63 +
  64 + _this.nullbox = _this.brandData.length ? "hide" : "";
  65 + }).fail(() => {
  66 + tip('网络错误');
  67 + });
  68 + },
  69 + editModel(action) {
  70 + this.editmodel = action;
  71 + },
  72 + delItem(index, id) {
  73 + let _this = this;
  74 + $.modal.confirm('', '确定刪除该收藏吗？', function() {
  75 + this.hide();
  76 + $.ajax({
  77 + method: 'post',
  78 + url: '/home/favorite/favdel',
  79 + data: {
  80 + id: id
  81 + }
  82 + }).then(function(data) {
  83 + if (data.code === 200) {
  84 + _this.brandData.splice(index, 1);
  85 + } else if (data.code === 400) {
  86 + $.modal.alert(data.message, '出错了！');
  87 + } else {
  88 + $.modal.alert('', '刪除收藏失败');
  89 + }
  90 + }).fail(function() {
  91 + $.modal.alert('', '网络错误');
  92 + });
  93 + });
  94 + }
  95 + }
  96 + };
  97 +</script>
  98 +
1 <template> 1 <template>
2 - <div class="fav-type show" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> 2 + <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
3 <ul class="fav-product-list"> 3 <ul class="fav-product-list">
4 <li v-for="item in productData" track-by="fav_id"> 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> 5 + <div class="fav-del {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
  6 + <span class="fav-del-span"></span>
7 </div> 7 </div>
8 <a :href="item.link"> 8 <a :href="item.link">
9 <div class="fav-img-box"> 9 <div class="fav-img-box">
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 </li> 25 </li>
26 </ul> 26 </ul>
27 <div class="fav-null-box {{ nullbox }}"> 27 <div class="fav-null-box {{ nullbox }}">
28 - <span class="fav-null">您暂无收藏任何商品}}</span> 28 + <span class="fav-null">您暂无收藏任何商品</span>
29 <a slot="go-shopping" class="go-shopping" :href="productUrl">随便逛逛</a> 29 <a slot="go-shopping" class="go-shopping" :href="productUrl">随便逛逛</a>
30 </div> 30 </div>
31 </div> 31 </div>
@@ -34,9 +34,8 @@ @@ -34,9 +34,8 @@
34 <script> 34 <script>
35 const $ = require('yoho-jquery'); 35 const $ = require('yoho-jquery');
36 const tip = require('common/tip'); 36 const tip = require('common/tip');
37 - const Loading = require('common/loading');  
38 const modal = require('common/modal'); 37 const modal = require('common/modal');
39 - const loading = new Loading(); 38 + const loading = require('common/loading');
40 39
41 module.exports = { 40 module.exports = {
42 props: ['productUrl'], 41 props: ['productUrl'],
@@ -51,8 +50,6 @@ @@ -51,8 +50,6 @@
51 }, 50 },
52 methods: { 51 methods: {
53 loadMore: function() { 52 loadMore: function() {
54 - loading.show();  
55 -  
56 let _this = this; 53 let _this = this;
57 this.busy = true; 54 this.busy = true;
58 55
@@ -72,15 +69,14 @@ @@ -72,15 +69,14 @@
72 } 69 }
73 70
74 _this.nullbox = _this.productData.length ? "hide" : ""; 71 _this.nullbox = _this.productData.length ? "hide" : "";
75 - loading.hide();  
76 }).fail(() => { 72 }).fail(() => {
77 tip('网络错误'); 73 tip('网络错误');
78 }); 74 });
79 }, 75 },
80 - editProduct(action) { 76 + editModel(action) {
81 this.editmodel = action; 77 this.editmodel = action;
82 }, 78 },
83 - delProduct(index, id) { 79 + delItem(index, id) {
84 let _this = this; 80 let _this = this;
85 $.modal.confirm('', '确定刪除该收藏吗？', function() { 81 $.modal.confirm('', '确定刪除该收藏吗？', function() {
86 this.hide(); 82 this.hide();
@@ -96,7 +92,7 @@ @@ -96,7 +92,7 @@
96 } else if (data.code === 400) { 92 } else if (data.code === 400) {
97 $.modal.alert(data.message, '出错了！'); 93 $.modal.alert(data.message, '出错了！');
98 } else { 94 } else {
99 - $.modal.alert('', '取消收藏失败'); 95 + $.modal.alert('', '刪除收藏失败');
100 } 96 }
101 }).fail(function() { 97 }).fail(function() {
102 $.modal.alert('', '网络错误'); 98 $.modal.alert('', '网络错误');