|
|
<template> <view> <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> <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;"> <image :src="item.goods.cover" mode=""></image> <view class="cu-tag badge tag-self lf-font-28" :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"> <lf-price :price="item.selling_price" style="margin-top: 10rpx;" /> </view> </view> </view> <view> <view class="u-border-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;"> {{item.comment_text}} </view> </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> </scroll-view> </swiper-item> </swiper> </view></template>
<script> export default { data() { return { tab_list: [{ name: '全部', type: 'all', list: [], loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { name: '待付款', type: 'unpaid', list: [], loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { name: '待核销', type: 'paid', list: [], loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { name: '已核销', type: 'complete', list: [], loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { name: '售后', type: 'after_sales', list: [], loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true } ], current: 0, // tab下表
pageSize: 10, assetsType: '', //账户类型
orderType: [], windowHeight: 0, // 屏幕可用高度
isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
} }, onLoad(e) { this.windowHeight = getApp().globalData.windowHeight; this.assetsType = e.type }, onShow() { this.refreshFn({}); }, methods: { // 切换tab
change(index) { this.current = index; this.getUserOrder(); }, // 滑块下标值变化
swiperChange(event){ this.current = event.detail.current; if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
this.getUserOrder(); }, goDetails(tabIndex,index) { let item = this.tab_list[tabIndex].list[index] this.$routerGo('/pages/shopOrder/order-details?order_id=' + item.id) }, getUserOrder(options = {}) { let per_page = this.pageSize; let tab_item = this.tab_list[this.current]; this.$http(this.API.API_SHOPORDER, { state: this.tab_list[this.current].type, page: tab_item.page, per_page }).then(res => { 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); } }) }, // 页面触底，加载下一页
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>
<style lang="scss" scoped> .tag-self { position: absolute!important; top: 0!important; border-radius: 20rpx 0 20rpx 0!important; width: max-content; height: 32rpx!important; } .title { font-size: 28rpx; color: $u-content-color; height: 80rpx; }
// tab
.ctab { width: 100%; margin: 20rpx 0 0rpx 0rpx; padding: 0 22rpx; }
// 商品列表
.com { width: 100%; height: 100%; overflow: hidden;
.list { border-radius: 10rpx; overflow: hidden; margin: 20rpx 32rpx; background-color: #FFFFFF; // box-shadow: 0 0 10px 5px #e5e5e5;
box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1); align-items: flex-start;
.left { overflow: hidden;
image { width: 186rpx; height: 186rpx; margin: 20rpx; border-radius: 10rpx; } }
.right { overflow: hidden; width: 64%;
.title { margin: 0rpx 20rpx 10rpx 0; color: #222222; font-size: 32rpx; }
.tips { margin: 16rpx 0; overflow: hidden;
.u-line-progress { width: 112rpx; overflow: hidden; margin-right: 20rpx; }
.progress { color: #777777; font-size: 24rpx; }
.bought { color: #777777; font-size: 24rpx; margin-right: 20rpx; } }
.price { overflow: hidden; color: #FF0000; margin-top: 10rpx; button { width: 176rpx; height: 60rpx; background: #FE9903; border-radius: 15px; font-size: 24rpx; color: #FFFFFF; margin: 0rpx 20rpx 0rpx 20rpx; border: none; } } } } }</style>
|
