fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit fa716533ee7c71d74c21678cb0b20e97bc2ae5df 1 parent 964b51aa

左划

Inline Side-by-side
Showing 5 changed files with 195 additions and 36 deletions
@@ -82,7 +82,7 @@ const component = { @@ -82,7 +82,7 @@ const component = {
82 }).catch(next); 82 }).catch(next);
83 }, 83 },
84 service: (req, res, next) => { 84 service: (req, res, next) => {
85 - res.redirect('http://chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=620092&configID=149091&jid=8732423409') 85 + res.redirect('http://chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=703953&configID=149819&jid=1099911094')
86 }, 86 },
87 help: (req, res, next) => { 87 help: (req, res, next) => {
88 homeModel.getHelpInfo().then(helpList => { 88 homeModel.getHelpInfo().then(helpList => {
@@ -2,6 +2,9 @@ const Vue = require('yoho-vue'); @@ -2,6 +2,9 @@ const Vue = require('yoho-vue');
2 const infiniteScroll = require('yoho-vue-infinite-scroll'); 2 const infiniteScroll = require('yoho-vue-infinite-scroll');
3 const favBrandList = require('home/fav-brand-list.vue'); 3 const favBrandList = require('home/fav-brand-list.vue');
4 4
  5 +const VueTouch = require('vue-touch');
  6 +Vue.use(VueTouch)
  7 +
5 Vue.use(infiniteScroll); 8 Vue.use(infiniteScroll);
6 9
7 new Vue({ 10 new Vue({
@@ -2,6 +2,9 @@ const Vue = require('yoho-vue'); @@ -2,6 +2,9 @@ const Vue = require('yoho-vue');
2 const infiniteScroll = require('yoho-vue-infinite-scroll'); 2 const infiniteScroll = require('yoho-vue-infinite-scroll');
3 const favProductList = require('home/fav-product-list.vue'); 3 const favProductList = require('home/fav-product-list.vue');
4 4
  5 +const VueTouch = require('vue-touch');
  6 +Vue.use(VueTouch)
  7 +
5 Vue.use(infiniteScroll); 8 Vue.use(infiniteScroll);
6 9
7 new Vue({ 10 new Vue({
1 <template> 1 <template>
2 <div class="fav-type" 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-brand-list"> 3 <ul class="fav-brand-list">
4 - <li v-for="item in brandData" track-by="$index" id="li-{{$index}}">  
5 - <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn($index)"> 4 + <li v-for="item in brandData" track-by="fav_id" id="li-{{item.fav_id}}"
  5 + v-touch:panstart="panstart(item.fav_id)"
  6 + v-touch:panmove="panmove(item.fav_id)"
  7 + v-touch:panend="panend(item.fav_id)">
  8 + <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
6 <span class="fav-del-span"><span class="icon icon-edit-del"></span></span> 9 <span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
7 </div> 10 </div>
8 <a :href="item.link"> 11 <a :href="item.link">
@@ -11,10 +14,12 @@ @@ -11,10 +14,12 @@
11 </div> 14 </div>
12 <div class="fav-info-list"> 15 <div class="fav-info-list">
13 <span class="title">{{item.brandName}}</span> 16 <span class="title">{{item.brandName}}</span>
14 - <span class="down" v-if="item.down">品牌已下架</span> 17 + <span class="down">
  18 + <span v-if="item.down">品牌已下架</span>
  19 + </span>
15 </div> 20 </div>
16 </a> 21 </a>
17 - <div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> 22 + <div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
18 <span class="icon icon-delete"></span> 23 <span class="icon icon-delete"></span>
19 <br/> 24 <br/>
20 <span class="fav-del-txt">删除</span> 25 <span class="fav-del-txt">删除</span>
@@ -42,7 +47,11 @@ @@ -42,7 +47,11 @@
42 busy: false, 47 busy: false,
43 editmodel: false, 48 editmodel: false,
44 page: 0, 49 page: 0,
45 - brandData: [] 50 + pageX: 0,
  51 + currentX: 0,
  52 + pandata: {},
  53 + brandData: [],
  54 + keys: {}
46 }; 55 };
47 }, 56 },
48 methods: { 57 methods: {
@@ -65,7 +74,10 @@ @@ -65,7 +74,10 @@
65 74
66 if (result.list.length) { 75 if (result.list.length) {
67 result.list.forEach(function(o) { 76 result.list.forEach(function(o) {
  77 + if (!_this.keys[o.fav_id]) {
  78 + _this.keys[o.fav_id] = true;
68 _this.brandData.push(o); 79 _this.brandData.push(o);
  80 + }
69 }); 81 });
70 } 82 }
71 83
@@ -74,19 +86,20 @@ @@ -74,19 +86,20 @@
74 tip('网络错误'); 86 tip('网络错误');
75 }); 87 });
76 }, 88 },
77 - showDelBtn(index) { 89 + showDelBtn(id) {
78 this.hideDelBth(); 90 this.hideDelBth();
79 - let delBtn = $('#del-' + index); 91 + let delBtn = $('#del-' + id);
80 let width = delBtn.width(); 92 let width = delBtn.width();
81 93
82 - $('#li-' + index).css('transform', 'translateX(-' + width + 'px)'); 94 + $('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
83 delBtn.removeClass('hide'); 95 delBtn.removeClass('hide');
84 }, 96 },
85 hideDelBth() { 97 hideDelBth() {
86 - this.brandData.forEach(function(d, index) {  
87 - $('#li-' + index).css('transform', 'translateX(0px)');  
88 - $('#del-' + index).addClass('hide'); 98 + this.brandData.forEach(function(d) {
  99 + $('#li-' + d.fav_id).css('transform', 'translateX(0px)');
  100 + $('#del-' + d.fav_id).addClass('hide');
89 }); 101 });
  102 + this.pandata = {};
90 }, 103 },
91 delItem(index, id) { 104 delItem(index, id) {
92 let _this = this; 105 let _this = this;
@@ -102,6 +115,7 @@ @@ -102,6 +115,7 @@
102 if (data.code === 200) { 115 if (data.code === 200) {
103 _this.brandData.splice(index, 1); 116 _this.brandData.splice(index, 1);
104 _this.hideDelBth(); 117 _this.hideDelBth();
  118 + delete _this.keys[id];
105 } else if (data.code === 400) { 119 } else if (data.code === 400) {
106 tip(data.message); 120 tip(data.message);
107 } else { 121 } else {
@@ -110,16 +124,77 @@ @@ -110,16 +124,77 @@
110 }).fail(function() { 124 }).fail(function() {
111 tip('网络错误'); 125 tip('网络错误');
112 }); 126 });
  127 + },
  128 + panstart: function(id) {
  129 + event.preventDefault();
  130 + if (this.editmodel) {
  131 + return false;
  132 + }
  133 +
  134 + $('#del-' + id).removeClass('hide');
  135 + this.pageX = event.targetTouches[0].pageX;
  136 + if (this.pandata.id !== id) {
  137 + if (this.pandata.id !== undefined) {
  138 + $('#li-' + this.pandata.id).css('transform', 'translateX(0px)');
  139 + $('#del-' + this.pandata.id).addClass('hide');
  140 + }
  141 +
  142 + this.pandata.objX = 0;
  143 + this.pandata.id = id;
  144 + }
  145 + },
  146 + panmove: function(id) {
  147 + event.preventDefault();
  148 + if (this.editmodel) {
  149 + return false;
  150 + }
  151 +
  152 + let li = $('#li-' + id);
  153 + let width = $('#del-' + id).width();
  154 + let moveX = event.targetTouches[0].pageX;
  155 + let X = moveX - this.pageX;
  156 +
  157 + if (this.pandata.objX == 0) {
  158 + if (X >= 0) {
  159 + this.currentX = 0;
  160 + } else {
  161 + this.currentX = -Math.min(Math.abs(X), width);
  162 + }
  163 + li.css('transform', "translateX(" + this.currentX + "px)");
  164 + } else if (this.pandata.objX < 0) {
  165 + if (X >= 0) {
  166 + this.currentX = Math.min(Math.abs(X) - width, 0);
  167 + } else {
  168 + this.currentX = -width;
  169 + }
  170 + li.css('transform', "translateX(" + this.currentX + "px)");
  171 + }
  172 + },
  173 + panend: function(id) {
  174 + event.preventDefault();
  175 + if (this.editmodel) {
  176 + return false;
  177 + }
  178 +
  179 + let li = $('#li-' + id);
  180 + let delBtn = $('#del-' + id);
  181 + let width = delBtn.width();
  182 +
  183 + if (this.currentX > -(width / 2)) {
  184 + this.pandata.objX = 0;
  185 + delBtn.addClass('hide');
  186 + } else {
  187 + this.pandata.objX = -width;
  188 + }
  189 + li.css('transform',"translateX(" + this.pandata.objX + "px)");
113 } 190 }
114 }, 191 },
115 created: function() { 192 created: function() {
116 let _this = this; 193 let _this = this;
117 194
118 yoho.addNativeMethod('editModel', function(action) { 195 yoho.addNativeMethod('editModel', function(action) {
119 - _this.editmodel = action;  
120 - if (!action) {  
121 _this.hideDelBth(); 196 _this.hideDelBth();
122 - } 197 + _this.editmodel = action;
123 }); 198 });
124 } 199 }
125 }; 200 };
@@ -138,10 +213,11 @@ @@ -138,10 +213,11 @@
138 .fav-brand-list { 213 .fav-brand-list {
139 padding-left: 20px; 214 padding-left: 20px;
140 list-style: none; 215 list-style: none;
  216 + overflow: hidden;
141 217
142 li { 218 li {
  219 + position: relative;
143 height: 135px; 220 height: 135px;
144 - overflow: hidden;  
145 border-bottom: 1px solid #e0e0e0; 221 border-bottom: 1px solid #e0e0e0;
146 } 222 }
147 223
@@ -214,23 +290,24 @@ @@ -214,23 +290,24 @@
214 font-size: 24px; 290 font-size: 24px;
215 padding-bottom: 10px; 291 padding-bottom: 10px;
216 margin-right: 10px; 292 margin-right: 10px;
217 - margin-top: 35px;  
218 - height: 100px; 293 + height: 100%;
219 overflow: hidden; 294 overflow: hidden;
220 position: relative; 295 position: relative;
221 296
222 .title { 297 .title {
223 - width: 430px;  
224 color: #b0b0b0; 298 color: #b0b0b0;
225 text-overflow: ellipsis; 299 text-overflow: ellipsis;
226 font-size: 34px; 300 font-size: 34px;
227 margin: 0; 301 margin: 0;
228 - } 302 + line-height: 130px;
229 } 303 }
230 304
231 - span {  
232 - &.down { 305 + .down {
  306 + height: 100%;
  307 + line-height: 130px;
233 float: right; 308 float: right;
  309 +
  310 + span {
234 padding: 5px 18px; 311 padding: 5px 18px;
235 color: #fffefe; 312 color: #fffefe;
236 background: #b0b0b0; 313 background: #b0b0b0;
@@ -239,6 +316,7 @@ @@ -239,6 +316,7 @@
239 } 316 }
240 } 317 }
241 } 318 }
  319 + }
242 320
243 .fav-null { 321 .fav-null {
244 font-size: 22px; 322 font-size: 22px;
1 <template> 1 <template>
2 <div class="fav-type" 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="$index" id="li-{{$index}}">  
5 - <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn($index)"> 4 + <li v-for="item in productData" track-by="fav_id" id="li-{{item.fav_id}}"
  5 + v-touch:panstart="panstart(item.fav_id)"
  6 + v-touch:panmove="panmove(item.fav_id)"
  7 + v-touch:panend="panend(item.fav_id)">
  8 + <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
6 <span class="fav-del-span"><span class="icon icon-edit-del"></span></span> 9 <span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
7 </div> 10 </div>
8 <a :href="item.link"> 11 <a :href="item.link">
@@ -22,7 +25,7 @@ @@ -22,7 +25,7 @@
22 </div> 25 </div>
23 </div> 26 </div>
24 </a> 27 </a>
25 - <div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> 28 + <div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
26 <span class="icon icon-delete"></span> 29 <span class="icon icon-delete"></span>
27 <br/> 30 <br/>
28 <span class="fav-del-txt">删除</span> 31 <span class="fav-del-txt">删除</span>
@@ -39,6 +42,7 @@ @@ -39,6 +42,7 @@
39 <script> 42 <script>
40 const $ = require('yoho-jquery'); 43 const $ = require('yoho-jquery');
41 const tip = require('common/tip'); 44 const tip = require('common/tip');
  45 + const yoho = require('yoho');
42 46
43 module.exports = { 47 module.exports = {
44 props: ['productUrl'], 48 props: ['productUrl'],
@@ -48,7 +52,11 @@ @@ -48,7 +52,11 @@
48 busy: false, 52 busy: false,
49 editmodel: false, 53 editmodel: false,
50 page: 0, 54 page: 0,
51 - productData: [] 55 + pageX: 0,
  56 + currentX: 0,
  57 + pandata: {},
  58 + productData: [],
  59 + keys: {}
52 }; 60 };
53 }, 61 },
54 methods: { 62 methods: {
@@ -70,7 +78,10 @@ @@ -70,7 +78,10 @@
70 78
71 if (result.list.length) { 79 if (result.list.length) {
72 result.list.forEach(function(o) { 80 result.list.forEach(function(o) {
  81 + if (!_this.keys[o.fav_id]) {
  82 + _this.keys[o.fav_id] = true;
73 _this.productData.push(o); 83 _this.productData.push(o);
  84 + }
74 }); 85 });
75 } 86 }
76 87
@@ -79,19 +90,20 @@ @@ -79,19 +90,20 @@
79 tip('网络错误'); 90 tip('网络错误');
80 }); 91 });
81 }, 92 },
82 - showDelBtn(index) { 93 + showDelBtn(id) {
83 this.hideDelBth(); 94 this.hideDelBth();
84 - let delBtn = $('#del-' + index); 95 + let delBtn = $('#del-' + id);
85 let width = delBtn.width(); 96 let width = delBtn.width();
86 97
87 - $('#li-' + index).css('transform', 'translateX(-' + width + 'px)');  
88 delBtn.removeClass('hide'); 98 delBtn.removeClass('hide');
  99 + $('#li-' + id).css('transform', 'translateX(-' + width + 'px)');
89 }, 100 },
90 hideDelBth() { 101 hideDelBth() {
91 - this.productData.forEach(function(d, index) {  
92 - $('#li-' + index).css('transform', 'translateX(0px)');  
93 - $('#del-' + index).addClass('hide'); 102 + this.productData.forEach(function(d) {
  103 + $('#li-' + d.fav_id).css('transform', 'translateX(0px)');
  104 + $('#del-' + d.fav_id).addClass('hide');
94 }); 105 });
  106 + this.pandata = {};
95 }, 107 },
96 delItem(index, id) { 108 delItem(index, id) {
97 let _this = this; 109 let _this = this;
@@ -107,6 +119,7 @@ @@ -107,6 +119,7 @@
107 if (data.code === 200) { 119 if (data.code === 200) {
108 _this.productData.splice(index, 1); 120 _this.productData.splice(index, 1);
109 _this.hideDelBth(); 121 _this.hideDelBth();
  122 + delete _this.keys[id];
110 } else if (data.code === 400) { 123 } else if (data.code === 400) {
111 tip(data.message); 124 tip(data.message);
112 } else { 125 } else {
@@ -115,16 +128,77 @@ @@ -115,16 +128,77 @@
115 }).fail(function() { 128 }).fail(function() {
116 tip('网络错误'); 129 tip('网络错误');
117 }); 130 });
  131 + },
  132 + panstart: function(id) {
  133 + event.preventDefault();
  134 + if (this.editmodel) {
  135 + return false;
  136 + }
  137 +
  138 + $('#del-' + id).removeClass('hide');
  139 + this.pageX = event.targetTouches[0].pageX;
  140 + if (this.pandata.id !== id) {
  141 + if (this.pandata.id !== undefined) {
  142 + $('#li-' + this.pandata.id).css('transform', 'translateX(0px)');
  143 + $('#del-' + this.pandata.id).addClass('hide');
  144 + }
  145 +
  146 + this.pandata.objX = 0;
  147 + this.pandata.id = id;
  148 + }
  149 + },
  150 + panmove: function(id) {
  151 + event.preventDefault();
  152 + if (this.editmodel) {
  153 + return false;
  154 + }
  155 +
  156 + let li = $('#li-' + id);
  157 + let width = $('#del-' + id).width();
  158 + let moveX = event.targetTouches[0].pageX;
  159 + let X = moveX - this.pageX;
  160 +
  161 + if (this.pandata.objX == 0) {
  162 + if (X >= 0) {
  163 + this.currentX = 0;
  164 + } else {
  165 + this.currentX = -Math.min(Math.abs(X), width);
  166 + }
  167 + li.css('transform', "translateX(" + this.currentX + "px)");
  168 + } else if (this.pandata.objX < 0) {
  169 + if (X >= 0) {
  170 + this.currentX = Math.min(Math.abs(X) - width, 0);
  171 + } else {
  172 + this.currentX = -width;
  173 + }
  174 + li.css('transform', "translateX(" + this.currentX + "px)");
  175 + }
  176 + },
  177 + panend: function(id) {
  178 + event.preventDefault();
  179 + if (this.editmodel) {
  180 + return false;
  181 + }
  182 +
  183 + let li = $('#li-' + id);
  184 + let delBtn = $('#del-' + id);
  185 + let width = delBtn.width();
  186 +
  187 + if (this.currentX > -(width / 2)) {
  188 + this.pandata.objX = 0;
  189 + delBtn.addClass('hide');
  190 + } else {
  191 + this.pandata.objX = -width;
  192 + }
  193 + li.css('transform',"translateX(" + this.pandata.objX + "px)");
118 } 194 }
119 }, 195 },
120 created: function() { 196 created: function() {
121 let _this = this; 197 let _this = this;
122 198
123 yoho.addNativeMethod('editModel', function(action) { 199 yoho.addNativeMethod('editModel', function(action) {
124 - _this.editmodel = action;  
125 - if (!action) {  
126 _this.hideDelBth(); 200 _this.hideDelBth();
127 - } 201 + _this.editmodel = action;
128 }); 202 });
129 } 203 }
130 }; 204 };
@@ -143,10 +217,11 @@ @@ -143,10 +217,11 @@
143 .fav-product-list { 217 .fav-product-list {
144 padding-left: 20px; 218 padding-left: 20px;
145 list-style: none; 219 list-style: none;
  220 + overflow: hidden;
146 221
147 li { 222 li {
  223 + position: relative;
148 height: 205px; 224 height: 205px;
149 - overflow: hidden;  
150 } 225 }
151 226
152 .fav-del-left { 227 .fav-del-left {