|
|
<template> <view> <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 --> <view class="padding-lr margin-bottom"> <me-tabs v-model="current" :tabs="tab_list" :fixed="true"></me-tabs> <!-- <u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-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" @click="goDetails(item)"> <view class="lf-row-between"> <view class="left"> <image :src="item.goods.cover" mode=""></image> <!-- <view class="cu-tag badge" style="position: relative;top: -100px;">待付款</view> --> </view> <view class="right"> <view class="lf-line-2 title">{{item.goods.name}}</view> <view class="lf-flex tips"> <text class="progress margin-right-xs">数量</text> <text class="bought">x {{item.number}}</text> </view> <view class="lf-row-between price"> <text class="lf-font-bold"> <text class="lf-font-24">￥</text> <text class="lf-font-42">{{item.selling_price}}</text> </text> <button v-if="item.state==1" @tap.stop="$routerGo('/pages/order/confirm-order?goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id)">立即付款</button> <button v-if="item.state==2" class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button> </view> </view> </view> <view class="padding-bottom padding-lr padding-top-sm"> <view class="u-border-top flex justify-between align-center text-center"> <view class="padding-top text-gray"> {{item.created_at_text}} </view> <view class="text-orange padding-top" v-if="item.state==1"> 请在10分钟内付款 </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"></u-back-top> </view> </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: [] } }, onLoad(e) { this.assetsType = e.type this.getUserOrder() }, methods: { // 切换tab
change(index) { this.current = index; }, goDetails(item) { if (item.state == 1) { this.$routerGo('/pages/order/unpay-details?orderid=' + item.id) } else { this.$routerGo('/pages/order/order-details?orderid=' + item.id) }
}, 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() { let per_page = this.pageSize; let tab_item = this.tab_list[this.current]; this.$http(this.API.API_USERORDER, { state: this.tab_list[this.current].type, page: tab_item.page, per_page }).then(res => { if (res.code == 0) { console.log(res)
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); } }
}).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
} } }, }</script>
<style lang="scss"> .title { font-size: 28rpx; color: $u-content-color; height: 88rpx; }
// tab
.ctab { width: 100%; margin: 20rpx 0 0rpx 0rpx; padding: 0 22rpx; }
// 商品列表
.com { width: 100%; overflow: hidden;
.list { border-radius: 10rpx; overflow: hidden; margin: 20rpx 32rpx; background-color: #FFFFFF; box-shadow: 0 0 10px 5px #e5e5e5; align-items: flex-start;
.left { overflow: hidden;
image { width: 204rpx; height: 204rpx; margin: 20rpx; border-radius: 10rpx; } }
.right { overflow: hidden; width: 64%;
.title { margin: 18rpx 20rpx 0 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; button { width: 160rpx; height: 60rpx; background: #FE9903; border-radius: 15px; font-size: 24rpx; color: #FFFFFF; margin: 0rpx 20rpx 0rpx 20rpx; border: none; } } } } }</style>
|
