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 16 </div>
17 17 <!-- btn按钮筛选 -->
18 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 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 68 </div>
57   - </div>
  69 + </van-pull-refresh>
58 70 <!-- 弹出框 -->
59 71 <van-popup position="bottom" v-model="actionSheetShow">
60 72 <van-picker
... ... @@ -77,32 +89,34 @@ export default {
77 89 name: "myGiftBox",
78 90 data() {
79 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 112 receivingGiftsInfo: null, // 收礼列表页数据
99 113 loading: false, // 判断是否加载
100 114 receivingGifts: {
101 115 // 收礼
102 116 loading: false, // 加载
103 117 pages: 1, // 分页
104   - tipText:null, // 数据加载完提示
105   - isData:null // 是否有赠礼 1 有 0 无
  118 + tipText: null, // 数据加载完提示
  119 + isData: null // 是否有赠礼 1 有 0 无
106 120 },
107 121 giftGivingItem: null, // 送礼列表页数据
108 122 giftsRuleUrl: null, // 礼物规则URL
... ... @@ -110,8 +124,8 @@ export default {
110 124 // 送礼
111 125 loading: false, // 加载
112 126 pages: 1, // 分页
113   - tipText:null, // 数据加载完提示
114   - isData:null // 是否有赠礼 1 有 0 无
  127 + tipText: null, // 数据加载完提示
  128 + isData: null // 是否有赠礼 1 有 0 无
115 129 },
116 130 // tipText: null, // 是否已加载完
117 131 actionSheetShow: false,
... ... @@ -119,7 +133,8 @@ export default {
119 133 // 存取取消订单的信息
120 134 causes: [], // 取消原因
121 135 item: null //订单id
122   - }
  136 + },
  137 + isLoading: false //下拉刷新
123 138 };
124 139 },
125 140 components: {
... ... @@ -154,6 +169,27 @@ export default {
154 169 }
155 170 },
156 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 194 * tab切换
159 195 */
... ... @@ -175,14 +211,14 @@ export default {
175 211 }
176 212 },
177 213 // tab订单状态筛选
178   - onStatusFiltering(name, title){
179   - if(this.active==0){
  214 + onStatusFiltering(name, title) {
  215 + if (this.active == 0) {
180 216 // 收礼订单列表
181 217 this.receivingGiftStatue = name;
182 218 this.receivingGifts.tipText = null;
183   - this.receivingGifts.pages = 1
  219 + this.receivingGifts.pages = 1;
184 220 this.getorderGiftList(1);
185   - }else{
  221 + } else {
186 222 // 送礼订单列表
187 223 this.giveGifStatue = name;
188 224 this.giftGiving.tipText = null;
... ... @@ -264,7 +300,7 @@ export default {
264 300 * 获取收礼礼物列表
265 301 */
266 302 getorderGiftList(initPage) {
267   - console.log(this.receivingGifts.pages)
  303 + console.log(this.receivingGifts.pages);
268 304 this.receivingGifts.loading = true;
269 305 // 加载中提示
270 306 Indicator.open("加载中...");
... ... @@ -276,7 +312,7 @@ export default {
276 312 uid: this.$route.query.uid, // 用户id
277 313 page: this.receivingGifts.pages, // 分页 默认为1 一页20条
278 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 317 this.getorderGiftListCallback,
282 318 {
... ... @@ -299,15 +335,15 @@ export default {
299 335 if (res.code == 200) {
300 336 // 解构数据
301 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 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 344 // 设置shopFnsDynamic达人动态数据
309 345 if (datas.list && datas.list.length) {
310   - // 隐藏加载圈
  346 + // 隐藏加载圈
311 347 this.receivingGifts.loading = false;
312 348 if (this.receivingGifts.pages > 1) {
313 349 this.$set(this, "receivingGiftsInfo", [
... ... @@ -317,15 +353,15 @@ export default {
317 353 } else {
318 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 363 // this.receivingGifts.pages = 1; // 数据为空时页脚从1开始计算
328   - if(this.receivingGifts.pages==1){
  364 + if (this.receivingGifts.pages == 1) {
329 365 //页脚等于1的时候会出现数据获取为空
330 366 this.receivingGiftsInfo = datas.list;
331 367 }
... ... @@ -418,7 +454,7 @@ export default {
418 454 },
419 455 this.getorderGiveGiftListCallback,
420 456 {
421   - method: "post",
  457 + method: "post"
422 458 }
423 459 );
424 460 },
... ... @@ -437,12 +473,12 @@ export default {
437 473 // 解构数据
438 474 let { data: datas } = res;
439 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 482 if (datas.list && datas.list.length) {
447 483 // 隐藏加载圈
448 484 this.giftGiving.loading = false;
... ... @@ -455,14 +491,14 @@ export default {
455 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 500 // this.giftGiving.pages = 1;// 数据为空时设置分页数为1
465   - if(this.giftGiving.pages==1){
  501 + if (this.giftGiving.pages == 1) {
466 502 //页脚等于1的时候会出现数据获取为空
467 503 this.giftGivingItem = datas.list;
468 504 }
... ...