|
|
<template> <view> <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 --> <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> <!-- <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" @tap="goDetails(tabIndex,index)"> <view class="lf-row-between"> <view class="left" style="position: relative;display: flex;"> <image :src="item.goods.cover" mode=""></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;">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 </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;"> <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?type=1&goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id +'&order_id='+ item.id)">立即付款</button> <button v-if="item.state==2" class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?order_id='+item.id)">立即使用</button> <button v-if="item.state==4" class="cu-btn1 border round margin-left-sm">等待审核</button> </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> </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: [], showLogin: true } }, onLoad(e) { this.assetsType = e.type; }, onShow() { this.verifyUserInfo(); 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(); }, methods: { // 检查当前用户登录状态
verifyUserInfo(){ let userInfo = uni.getStorageSync('userinfo') || {}; if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){ if(this.showLogin){ this.showLogin = false; this.$url('/pages/login/index?type=userinfo'); }else{ this.showLogin = true; this.$url('/pages/index/index', {type: 'switch'}); } } }, // 切换tab
change(index) { this.current = index; this.getUserOrder(); }, goDetails(tabIndex,index) { // this.$routerGo('/pages/order/order-details?order_id=55')
console.log(tabIndex,index) let item = this.tab_list[tabIndex].list[index] if (item.state == 1) { this.$routerGo('/pages/order/unpay-details?order_id=' + item.id) } else if(item.state == 4){ this.$routerGo('/pages/order/apply-details?order_id=' + item.id) }else { this.$routerGo('/pages/order/order-details?order_id=' + 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) 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); } } }
}).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" scoped> .cu-btn1 { background-color: white!important; color: #777!important; border: 1px solid #777!important; } .font-400 { font-weight: 400; } .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: 98rpx; }
// tab
.ctab { width: 100%; margin: 20rpx 0 0rpx 0rpx; padding: 0 22rpx; }
// 商品列表
.com { width: 100%; overflow: hidden;
.list { border-radius: 10rpx; overflow: hidden; margin: 30rpx 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: 67%;
.title { margin: 0rpx 20rpx 0rpx 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: 176rpx; height: 60rpx; background: #FE9903; border-radius: 15px; font-size: 24rpx; color: #FFFFFF; margin: 0rpx 20rpx 0rpx 20rpx; border: none; } } } } }</style>
|
