Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[优化] 首页滑动切换tab多请求了一次接口 

[优化] 用户订单列表增加滑动page切换tab的能力
dev
邓平艺 4 years ago
parent
6bb13c3c94
commit
3fe0724e19
2 changed files with 99 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      pages/index/index.vue
  2. 195
      pages/order/index.vue

4
pages/index/index.vue
View File

@ -80,6 +80,10 @@
// 滑块下标值变化
swiperChange(event){
this.current = event.detail.current;
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
if(this.tab_list[event.detail.current].list.length <= 0){
this.getGoodsList(); // tab下没有数据，请求第一页
}
},
// 获取分类tab
getCategoryList(options = {}){

195
pages/order/index.vue
View File

@ -4,47 +4,51 @@
<view class="padding-lr" style="margin-bottom: 10rpx;margin-top: 20rpx;">
<me-tabs v-model="current" :tabs="tab_list" :fixed="true" @change="change"></me-tabs>
</view>
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">
<view class="flex-direction justify-around list" v-for="(item, index) in tab.list" :key="item.id" @tap="goDetails(tabIndex,index)">
<view class="lf-row-between">
<view class="left" style="position: relative;display: flex;">
<image :src="item.goods.cover" mode="aspectFill"></image>
<view class="cu-tag badge tag-self lf-font-28 font-400" :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view>
</view>
<view class="right">
<view class="lf-line-2 title" style="line-height: 40rpx;">{{item.goods.name}}</view>
<view class="lf-flex tips" style="margin: 0!important;">
<text class="progress margin-right-xs">数量</text>
<text class="bought">x {{item.number}}</text>
<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="flex-direction justify-around list" v-for="(item, index) in tab.list" :key="item.id" @tap="goDetails(tabIndex,index)">
<view class="lf-row-between">
<view class="left" style="position: relative;display: flex;">
<image :src="item.goods.cover" mode="aspectFill"></image>
<view class="cu-tag badge tag-self lf-font-28 font-400" :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view>
</view>
<view class="right">
<view class="lf-line-2 title" style="line-height: 40rpx;">{{item.goods.name}}</view>
<view class="lf-flex tips" style="margin: 0!important;">
<text class="progress margin-right-xs">数量</text>
<text class="bought">x {{item.number}}</text>
</view>
<view class="lf-row-between price" style="padding-right: 6rpx;">
<lf-price :price="item.selling_price" style="margin-top: 10rpx;" />
<button v-if="item.state==1" class="lf-font-28" style="border-radius: 30rpx;" @tap.stop="$routerGo('/pages/order/confirm-atonce?type=1&goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id +'&order_id='+ item.id+'&order_number='+item.number)">立即付款</button>
<button v-if="item.state==2" style="border-radius: 30rpx;" class="cu-btn bg-green round margin-left-sm lf-font-28" @tap.stop="$routerGo('/pages/order/order-details?order_id='+item.id)">立即使用</button>
<button v-if="item.state==4" class="cu-btn1 border margin-left-sm lf-font-28" style="border-radius: 30rpx;">等待审核</button>
</view>
</view>
</view>
<view class="lf-row-between price" style="padding-right: 6rpx;">
<lf-price :price="item.selling_price" style="margin-top: 10rpx;" />
<button v-if="item.state==1" class="lf-font-28" style="border-radius: 30rpx;" @tap.stop="$routerGo('/pages/order/confirm-atonce?type=1&goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id +'&order_id='+ item.id+'&order_number='+item.number)">立即付款</button>
<button v-if="item.state==2" style="border-radius: 30rpx;" class="cu-btn bg-green round margin-left-sm lf-font-28" @tap.stop="$routerGo('/pages/order/order-details?order_id='+item.id)">立即使用</button>
<button v-if="item.state==4" class="cu-btn1 border margin-left-sm lf-font-28" style="border-radius: 30rpx;">等待审核</button>
<view>
<view class="solid-top flex justify-between align-center text-center">
<view class="text-gray lf-font-28" style="padding: 20rpx;">
{{item.created_at_text}}
</view>
<view class="text-orange" v-if="item.state==1" style="padding: 20rpx 24rpx 20rpx 20rpx;">
{{item.comment_text}}
</view>
</view>
</view>
</view>
</view>
<view>
<view class="solid-top flex justify-between align-center text-center">
<view class="text-gray lf-font-28" style="padding: 20rpx;">
{{item.created_at_text}}
</view>
<view class="text-orange" v-if="item.state==1" style="padding: 20rpx 24rpx 20rpx 20rpx;">
{{item.comment_text}}
</view>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="tab.list.length"
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
</view>
</view>
<!-- 加载 -->
<view class="loading-more">
<text v-if="tab.list.length"
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
@ -100,10 +104,13 @@
pageSize: 10,
assetsType: '', //账户类型
orderType: [],
showLogin: true
showLogin: true,
windowHeight: 0, // 屏幕可用高度
isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
}
},
onLoad(e) {
this.windowHeight = getApp().globalData.windowHeight;
this.assetsType = e.type;
},
onShow() {
@ -134,6 +141,12 @@
this.current = index;
this.getUserOrder();
},
// 滑块下标值变化
swiperChange(event){
this.current = event.detail.current;
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
this.getUserOrder();
},
goDetails(tabIndex,index) {
console.log(tabIndex,index)
let item = this.tab_list[tabIndex].list[index]
@ -146,23 +159,8 @@
}
},
onReachBottom() {
let tab_item = this.tab_list[this.current];
if (tab_item.isPage) {
tab_item.page = tab_item.page + 1;
this.getUserOrder();
}
},
onPullDownRefresh() {
let tab_item = this.tab_list[this.current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
this.getUserOrder();
uni.stopPullDownRefresh()
},
getUserOrder() {
getUserOrder(options = {}) {
let per_page = this.pageSize;
let tab_item = this.tab_list[this.current];
this.$http(this.API.API_USERORDER, {
@ -170,57 +168,54 @@
page: tab_item.page,
per_page
}).then(res => {
if (res.code == 0) {
console.log(res)
if( Object.keys(res.metal_data).length != 0 ) {
this.$routerGo('/pages/login/index?type=userinfo')
}else {
let isPage = res.data.has_more_page;
tab_item.isPage = isPage;
if (isPage) {
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
} else {
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
if (tab_item.page == 1) {
tab_item.list = res.data.items;
} else {
tab_item.list.push(...res.data.items);
}
if( Object.keys(res.metal_data).length != 0 ) {
this.$routerGo('/pages/login/index?type=userinfo')
}else {
let isPage = res.data.has_more_page;
tab_item.isPage = isPage;
if (!isPage) {
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
if(options.type == 'pageRefresh'){
uni.stopPullDownRefresh();
}else if(options.type == 'scrollRefresh'){
this.isRefresher = false;
}
if (tab_item.page == 1) {
tab_item.list = res.data.items;
} else {
tab_item.list.push(...res.data.items);
}
}
}).catch(err => {
});
})
},
//返回
back() {
if (this.assetsType === 'all2') {
// #ifdef H5
window.history.go(-2)
// #endif
// #ifndef H5
uni.navigateBack({
delta: 2
});
// #endif
} else {
// #ifdef H5
window.history.go(-1)
// #endif
// #ifndef H5
uni.navigateBack({
delta: 1
});
// #endif
// 页面触底，加载下一页
onScrolltolower(){
let tab_item = this.tab_list[this.current];
if(tab_item.isPage){
tab_item.page = tab_item.page + 1;
this.getUserOrder();
}
},
// scroll-view 下拉刷新
onRefresherrefresh(){
this.isRefresher = true;
this.refreshFn({type: 'scrollRefresh'});
},
// 下拉刷新处理
refreshFn(options){
let tab_item = this.tab_list[this.current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
this.getUserOrder(options);
}
},
onPullDownRefresh() {
this.refreshFn({type: 'pageRefresh'});
}
}
</script>

Write Preview
Loading…
Cancel
Save