w-front-end / select_good · Commits

Commit 93bc80b94af15f658e35466fa138cebfe69df8d0

Authored by zhiyangdu
1 parent 07e147eb

增加下拉刷线功能

Inline Side-by-side
Showing 1 changed file with 127 additions and 91 deletions
src/pages/myGiftBox/myGiftBox.vue
  View file @93bc80b
@@ -16,45 +16,57 @@ @@ -16,45 +16,57 @@
16 </div> 16 </div>
17 <!-- btn按钮筛选 --> 17 <!-- btn按钮筛选 -->
18 <div class="tab_btn_list"> 18 <div class="tab_btn_list">
19 - <van-tabs @change="onStatusFiltering" v-model="btnActive" swipeable>  
20 - <van-tab v-for="(item,index) in (active==0?receivingGiftsTab:giveGifTab)" :title="item.name" :key="'tab'+index">  
21 -  
22 - </van-tab>  
23 - </van-tabs> 19 + <van-tabs @change="onStatusFiltering" v-model="btnActive" swipeable>
  20 + <van-tab
  21 + v-for="(item, index) in active == 0
  22 + ? receivingGiftsTab
  23 + : giveGifTab"
  24 + :title="item.name"
  25 + :key="'tab' + index"
  26 + >
  27 + </van-tab>
  28 + </van-tabs>
24 </div> 29 </div>
25 - <!--内容-->  
26 - <div class="item_box">  
27 - <div  
28 - infinite-scroll-immediate-check="true"  
29 - v-infinite-scroll="onInfiniteScroll"  
30 - infinite-scroll-disabled="loading"  
31 - :infinite-scroll-distance="50"  
32 - infinite-scroll-throttle-delay="600"  
33 - >  
34 - <!-- 收礼列表 -->  
35 - <receiving-gifts-item  
36 - v-show="active != 1 && active == 0"  
37 - @onUserInfo="onUserInfo"  
38 - @giftInReturn="giftInReturn"  
39 - @onReceivingGifts="onReceivingGifts"  
40 - :receivingGiftsInfo="receivingGiftsInfo"  
41 - :isData=this.receivingGifts.isData  
42 - ></receiving-gifts-item>  
43 - <!-- 送礼列表 -->  
44 - <giftGivingItem  
45 - @onGiftGiving="onGiftGiving"  
46 - @onCancelPayment="onCancelPayment"  
47 - @jumpToPay="jumpToPay"  
48 - v-show="active != 0 && active == 1"  
49 - :giftGivingItem="giftGivingItem"  
50 - :isData= this.giftGiving.isData 30 + <!--下拉刷新-->
  31 + <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  32 + <!--内容-->
  33 + <div class="item_box">
  34 + <div
  35 + infinite-scroll-immediate-check="true"
  36 + v-infinite-scroll="onInfiniteScroll"
  37 + infinite-scroll-disabled="loading"
  38 + :infinite-scroll-distance="50"
  39 + infinite-scroll-throttle-delay="600"
51 > 40 >
52 - </giftGivingItem>  
53 - <!-- 没有更多了 -->  
54 - <div v-if="active==0" class="tip_text">{{this.receivingGifts.tipText }}</div>  
55 - <div v-else class="tip_text">{{this.giftGiving.tipText }}</div> 41 + <!-- 收礼列表 -->
  42 + <receiving-gifts-item
  43 + v-show="active != 1 && active == 0"
  44 + @onUserInfo="onUserInfo"
  45 + @giftInReturn="giftInReturn"
  46 + @onReceivingGifts="onReceivingGifts"
  47 + :receivingGiftsInfo="receivingGiftsInfo"
  48 + :isData="this.receivingGifts.isData"
  49 + ></receiving-gifts-item>
  50 + <!-- 送礼列表 -->
  51 + <giftGivingItem
  52 + @onGiftGiving="onGiftGiving"
  53 + @onCancelPayment="onCancelPayment"
  54 + @jumpToPay="jumpToPay"
  55 + v-show="active != 0 && active == 1"
  56 + :giftGivingItem="giftGivingItem"
  57 + :isData="this.giftGiving.isData"
  58 + >
  59 + </giftGivingItem>
  60 + <!-- 没有更多了 -->
  61 + <div v-if="active == 0" class="tip_text">
  62 + {{ this.receivingGifts.tipText }}
  63 + </div>
  64 + <div v-else class="tip_text">
  65 + {{ this.giftGiving.tipText }}
  66 + </div>
  67 + </div>
56 </div> 68 </div>
57 - </div> 69 + </van-pull-refresh>
58 <!-- 弹出框 --> 70 <!-- 弹出框 -->
59 <van-popup position="bottom" v-model="actionSheetShow"> 71 <van-popup position="bottom" v-model="actionSheetShow">
60 <van-picker 72 <van-picker
@@ -77,32 +89,34 @@ export default { @@ -77,32 +89,34 @@ export default {
77 name: "myGiftBox", 89 name: "myGiftBox",
78 data() { 90 data() {
79 return { 91 return {
80 - receivingGiftsTab:[ // 收礼tab筛选  
81 - {name:'全部',status:0},  
82 - {name:'未填写地址',status:1},  
83 - {name:'待发货',status:2},  
84 - {name:'已完成',status:3},  
85 - {name:'已发货',status:4} 92 + receivingGiftsTab: [
  93 + // 收礼tab筛选
  94 + { name: "全部", status: 0 },
  95 + { name: "未填写地址", status: 1 },
  96 + { name: "待发货", status: 2 },
  97 + { name: "已完成", status: 3 },
  98 + { name: "已发货", status: 4 }
86 ], 99 ],
87 - receivingGiftStatue:null, // 收礼订单状态筛选  
88 - giveGifTab:[ // 送礼tab筛选  
89 - {name:'全部',status:0},  
90 - {name:'可分享',status:1},  
91 - {name:'未填写地址',status:2},  
92 - {name:'待发货',status:3},  
93 - {name:'未领退款',status:4} 100 + receivingGiftStatue: null, // 收礼订单状态筛选
  101 + giveGifTab: [
  102 + // 送礼tab筛选
  103 + { name: "全部", status: 0 },
  104 + { name: "可分享", status: 1 },
  105 + { name: "未填写地址", status: 2 },
  106 + { name: "待发货", status: 3 },
  107 + { name: "未领退款", status: 4 }
94 ], 108 ],
95 - giveGifStatue:null, // 送礼订单状态筛选  
96 - btnActive:0, // 按钮tab状态  
97 - active: 0, 109 + giveGifStatue: null, // 送礼订单状态筛选
  110 + btnActive: 0, // 按钮tab状态
  111 + active: 0, // 收礼送礼两tab切换
98 receivingGiftsInfo: null, // 收礼列表页数据 112 receivingGiftsInfo: null, // 收礼列表页数据
99 loading: false, // 判断是否加载 113 loading: false, // 判断是否加载
100 receivingGifts: { 114 receivingGifts: {
101 // 收礼 115 // 收礼
102 loading: false, // 加载 116 loading: false, // 加载
103 pages: 1, // 分页 117 pages: 1, // 分页
104 - tipText:null, // 数据加载完提示  
105 - isData:null // 是否有赠礼 1 有 0 无 118 + tipText: null, // 数据加载完提示
  119 + isData: null // 是否有赠礼 1 有 0 无
106 }, 120 },
107 giftGivingItem: null, // 送礼列表页数据 121 giftGivingItem: null, // 送礼列表页数据
108 giftsRuleUrl: null, // 礼物规则URL 122 giftsRuleUrl: null, // 礼物规则URL
@@ -110,8 +124,8 @@ export default { @@ -110,8 +124,8 @@ export default {
110 // 送礼 124 // 送礼
111 loading: false, // 加载 125 loading: false, // 加载
112 pages: 1, // 分页 126 pages: 1, // 分页
113 - tipText:null, // 数据加载完提示  
114 - isData:null // 是否有赠礼 1 有 0 无 127 + tipText: null, // 数据加载完提示
  128 + isData: null // 是否有赠礼 1 有 0 无
115 }, 129 },
116 // tipText: null, // 是否已加载完 130 // tipText: null, // 是否已加载完
117 actionSheetShow: false, 131 actionSheetShow: false,
@@ -119,7 +133,8 @@ export default { @@ -119,7 +133,8 @@ export default {
119 // 存取取消订单的信息 133 // 存取取消订单的信息
120 causes: [], // 取消原因 134 causes: [], // 取消原因
121 item: null //订单id 135 item: null //订单id
122 - } 136 + },
  137 + isLoading: false //下拉刷新
123 }; 138 };
124 }, 139 },
125 components: { 140 components: {
@@ -154,6 +169,27 @@ export default { @@ -154,6 +169,27 @@ export default {
154 } 169 }
155 }, 170 },
156 methods: { 171 methods: {
  172 + //下拉刷新时会触发 refresh 事件
  173 + onRefresh() {
  174 + setTimeout(() => {
  175 + Toast("刷新成功");
  176 + this.isLoading = false;
  177 + // 初始化页脚
  178 + this.receivingGifts.pages = 1;
  179 + this.giftGiving.pages = 1
  180 + if (this.active == 0) {
  181 + // 收礼订单列表
  182 + this.getorderGiftList();
  183 + // 调用im是否显示隐藏1显示im聊天弹窗0不显示
  184 + this.setGiftBottomVisibleBySwitchTab(0);
  185 + } else {
  186 + // 调用im是否显示隐藏1显示im聊天弹窗0不显示
  187 + this.setGiftBottomVisibleBySwitchTab(1);
  188 + // 送礼订单列表
  189 + this.getorderGiveGiftList();
  190 + }
  191 + }, 1000);
  192 + },
157 /** 193 /**
158 * tab切换 194 * tab切换
159 */ 195 */
@@ -175,14 +211,14 @@ export default { @@ -175,14 +211,14 @@ export default {
175 } 211 }
176 }, 212 },
177 // tab订单状态筛选 213 // tab订单状态筛选
178 - onStatusFiltering(name, title){  
179 - if(this.active==0){ 214 + onStatusFiltering(name, title) {
  215 + if (this.active == 0) {
180 // 收礼订单列表 216 // 收礼订单列表
181 this.receivingGiftStatue = name; 217 this.receivingGiftStatue = name;
182 this.receivingGifts.tipText = null; 218 this.receivingGifts.tipText = null;
183 - this.receivingGifts.pages = 1 219 + this.receivingGifts.pages = 1;
184 this.getorderGiftList(1); 220 this.getorderGiftList(1);
185 - }else{ 221 + } else {
186 // 送礼订单列表 222 // 送礼订单列表
187 this.giveGifStatue = name; 223 this.giveGifStatue = name;
188 this.giftGiving.tipText = null; 224 this.giftGiving.tipText = null;
@@ -264,7 +300,7 @@ export default { @@ -264,7 +300,7 @@ export default {
264 * 获取收礼礼物列表 300 * 获取收礼礼物列表
265 */ 301 */
266 getorderGiftList(initPage) { 302 getorderGiftList(initPage) {
267 - console.log(this.receivingGifts.pages) 303 + console.log(this.receivingGifts.pages);
268 this.receivingGifts.loading = true; 304 this.receivingGifts.loading = true;
269 // 加载中提示 305 // 加载中提示
270 Indicator.open("加载中..."); 306 Indicator.open("加载中...");
@@ -276,7 +312,7 @@ export default { @@ -276,7 +312,7 @@ export default {
276 uid: this.$route.query.uid, // 用户id 312 uid: this.$route.query.uid, // 用户id
277 page: this.receivingGifts.pages, // 分页 默认为1 一页20条 313 page: this.receivingGifts.pages, // 分页 默认为1 一页20条
278 type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃） 314 type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃）
279 - status:this.receivingGiftStatue// 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货 315 + status: this.receivingGiftStatue // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
280 }, 316 },
281 this.getorderGiftListCallback, 317 this.getorderGiftListCallback,
282 { 318 {
@@ -299,15 +335,15 @@ export default { @@ -299,15 +335,15 @@ export default {
299 if (res.code == 200) { 335 if (res.code == 200) {
300 // 解构数据 336 // 解构数据
301 let { data: datas } = res; 337 let { data: datas } = res;
302 - // is_data是否有赠礼 1 有 0 无  
303 - this.receivingGifts.isData = datas.is_data 338 + // is_data是否有赠礼 1 有 0 无
  339 + this.receivingGifts.isData = datas.is_data;
304 // 页脚等于1的时候会出现数据获取为空 340 // 页脚等于1的时候会出现数据获取为空
305 - // if(this.receivingGifts.pages==1){  
306 - // this.receivingGiftsInfo = datas.list;  
307 - // } 341 + // if(this.receivingGifts.pages==1){
  342 + // this.receivingGiftsInfo = datas.list;
  343 + // }
308 // 设置shopFnsDynamic达人动态数据 344 // 设置shopFnsDynamic达人动态数据
309 if (datas.list && datas.list.length) { 345 if (datas.list && datas.list.length) {
310 - // 隐藏加载圈 346 + // 隐藏加载圈
311 this.receivingGifts.loading = false; 347 this.receivingGifts.loading = false;
312 if (this.receivingGifts.pages > 1) { 348 if (this.receivingGifts.pages > 1) {
313 this.$set(this, "receivingGiftsInfo", [ 349 this.$set(this, "receivingGiftsInfo", [
@@ -317,15 +353,15 @@ export default { @@ -317,15 +353,15 @@ export default {
317 } else { 353 } else {
318 this.$set(this, "receivingGiftsInfo", datas.list); 354 this.$set(this, "receivingGiftsInfo", datas.list);
319 } 355 }
320 - // 判断是否显示没有更多  
321 - if(datas.list.length<20){  
322 - this.receivingGifts.tipText = "已经全部加载完毕";  
323 - }else{  
324 - this.receivingGifts.tipText = "";  
325 - }  
326 - }else{ 356 + // 判断是否显示没有更多
  357 + if (datas.list.length < 20) {
  358 + this.receivingGifts.tipText = "已经全部加载完毕";
  359 + } else {
  360 + this.receivingGifts.tipText = "";
  361 + }
  362 + } else {
327 // this.receivingGifts.pages = 1; // 数据为空时页脚从1开始计算 363 // this.receivingGifts.pages = 1; // 数据为空时页脚从1开始计算
328 - if(this.receivingGifts.pages==1){ 364 + if (this.receivingGifts.pages == 1) {
329 //页脚等于1的时候会出现数据获取为空 365 //页脚等于1的时候会出现数据获取为空
330 this.receivingGiftsInfo = datas.list; 366 this.receivingGiftsInfo = datas.list;
331 } 367 }
@@ -418,7 +454,7 @@ export default { @@ -418,7 +454,7 @@ export default {
418 }, 454 },
419 this.getorderGiveGiftListCallback, 455 this.getorderGiveGiftListCallback,
420 { 456 {
421 - method: "post", 457 + method: "post"
422 } 458 }
423 ); 459 );
424 }, 460 },
@@ -437,12 +473,12 @@ export default { @@ -437,12 +473,12 @@ export default {
437 // 解构数据 473 // 解构数据
438 let { data: datas } = res; 474 let { data: datas } = res;
439 // is_data是否有赠礼 1 有 0 无 475 // is_data是否有赠礼 1 有 0 无
440 - this.giftGiving.isData = datas.is_data  
441 - // 页脚等于1的时候会出现数据获取为空  
442 - // if(this.receivingGifts.pages==1){  
443 - // this.giftGivingItem = datas.list;  
444 - // }  
445 - // 设置giftGivingItem数据 476 + this.giftGiving.isData = datas.is_data;
  477 + // 页脚等于1的时候会出现数据获取为空
  478 + // if(this.receivingGifts.pages==1){
  479 + // this.giftGivingItem = datas.list;
  480 + // }
  481 + // 设置giftGivingItem数据
446 if (datas.list && datas.list.length) { 482 if (datas.list && datas.list.length) {
447 // 隐藏加载圈 483 // 隐藏加载圈
448 this.giftGiving.loading = false; 484 this.giftGiving.loading = false;
@@ -455,14 +491,14 @@ export default { @@ -455,14 +491,14 @@ export default {
455 this.$set(this, "giftGivingItem", datas.list); 491 this.$set(this, "giftGivingItem", datas.list);
456 } 492 }
457 // 判断是否显示没有更多 493 // 判断是否显示没有更多
458 - if(datas.list.length<20){  
459 - this.giftGiving.tipText = "已经全部加载完毕";  
460 - }else{  
461 - this.giftGiving.tipText = "";  
462 - }  
463 - }else{ 494 + if (datas.list.length < 20) {
  495 + this.giftGiving.tipText = "已经全部加载完毕";
  496 + } else {
  497 + this.giftGiving.tipText = "";
  498 + }
  499 + } else {
464 // this.giftGiving.pages = 1;// 数据为空时设置分页数为1 500 // this.giftGiving.pages = 1;// 数据为空时设置分页数为1
465 - if(this.giftGiving.pages==1){ 501 + if (this.giftGiving.pages == 1) {
466 //页脚等于1的时候会出现数据获取为空 502 //页脚等于1的时候会出现数据获取为空
467 this.giftGivingItem = datas.list; 503 this.giftGivingItem = datas.list;
468 } 504 }