martial-arts/pagesA/my-order/my-order.vue

<template>
	<view>
		<status-container titlet="我的订单" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="posi-sticky" :style="{top:newtop+'px'}">
					<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="bacf mar-s20 pad-x20">
					<view @tap="$toolAll.tools.goPage(`/pagesB/order-detail/order-detail?id=${0}`)" class="bbot disac pad30 col26" v-for="(item,index) in orderList" :key="index">
						<image class="flexs mar-y20" :src="item.skus[0].spu_cover" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
						<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
							<view class="dis width100">
								<view class="clips2 width100">{{item.skus[0].spu_name}}</view>
								<view class="mar-z50">x{{item.skus[0].num}}</view>
							</view>
							<view class="disjbac width100">
								<view class="">实付：￥{{item.skus[0].price}}</view>
								<view v-if="item.status=='paid'" @tap.stop="clickBtn(index)" class="fon22 radius26 disjcac" style="background-color:#f37717;border: 2rpx solid #f37717;color: #FFFFFF;width: 134rpx;height: 50rpx;">去付款</view>
								<!-- <view @tap.stop="clickBtn(index)" class="fon22 radius26 disjcac" :style="{backgroundColor:['#FFFFF','#f37717','#FFFFF'][index],color:['#f37717','#FFFFFF','#969696'][index],borderColor:['#f37717','#f37717','#c9c9c9'][index]}" style="border: 2rpx solid #f37717;color: #f37717;width: 134rpx;height: 50rpx;">{{['确认收货','去付款','查看物流'][index]}}</view>
								<view @tap.stop="clickBtn(index)" class="fon22 radius26 disjcac" :style="{backgroundColor:['#FFFFF','#f37717','#FFFFF'][index],color:['#f37717','#FFFFFF','#969696'][index],borderColor:['#f37717','#f37717','#c9c9c9'][index]}" style="border: 2rpx solid #f37717;color: #f37717;width: 134rpx;height: 50rpx;">{{['确认收货','去付款','查看物流'][index]}}</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="pad-zy20" v-if="noMore">
					<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</view>
			</view>
		</status-container>
		<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle"></dynamic-frame>
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import pitera from '@/components/nothing/pitera.vue';
	import dynamicFrame from '@/components/dynamic-frame.vue';
	export default {
		components:{swiperTab,pitera,dynamicFrame},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				// newtop:uni.getSystemInfoSync().statusBarHeight + (140 / 750 * uni.getSystemInfoSync().windowWidth),
				current:0,
				dataList:[
					{title:'全部'},
					{title:'待付款'},
					{title:'待收货'},
					{title:'已完成'},
				],
				showType:-1,
				tipsTitle:'提示信息',
				dynamicText:{
					content:''
				},
				page:1,
				size:20,
				total:0,
				noMore:false,
				orderList:[]
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onReachBottom() {
			if(this.total!=this.orderList.length){
				this.page++;
				this.getOrderList();
			}
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index;
			},
			// 按钮点击
			clickBtn(index){
				this.tipsTitle = index==2?'物流信息':'提示信息';
				this.showType = [2,3,1][index];
				this.$refs.refFrame.ifLogistics = true;
				this.$refs.refFrame.ifAnimated = true;
			},
			// 获取我的订单列表
			getOrderList(){
				let params = {
					page:this.page,
					size:this.size
				}
				if(this.page==1) this.orderList = [];
				this.$requst.get('/api/user/order',params).then(res=>{
					if(res.code==0){
						this.total = res.data.total;
						this.orderList = [...this.orderList,...res.data.list];
						if(this.total==this.orderList.length && this.page!=1){
							this.noMore = true;
						}
					}
				})
			}
		}
	}
</script>

<style></style>