uniapp-shikongwang/pages/order/index.vue

<template>
	<view>
		
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<view class="padding-lr">
			<me-tabs style="border-top: 1px solid #f7f7f7;box-sizing:content-box;border-radius: 10px;" v-model="tabIndex" :tabs="tabs" :fixed="true"></me-tabs>
		</view>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MescrollItem from "./order-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				height: "400px", // 需要固定swiper的高度
				tabs: [{
					name: '全部',
					type: 'all'
				}, {
					name: '待付款',
					type: 'unpaid'
				}, {
					name: '已付款',
					type: 'paid'
				},
				{
					name: '已完成',
					type: 'complete'
				},
				{
					name:'售后',
					type: 'after_sales'
				}
				],
				tabIndex: 0, // 当前tab的下标
				assetsType: '' //账户类型
			}
		},
		onLoad(e) {
			this.assetsType = e.type
			this.tabIndex = this.assetsType === 'all' ? 0 : this.assetsType === 'unpaid' ? 1 : this.assetsType === 'paid' ? 2 : 0
			
			
			// 需要固定swiper的高度
			this.height = (uni.getSystemInfoSync().windowHeight) + 'px'
		},

		methods: {
			getUserOrder() {
				this.$http(this.API.API_USERORDER, {state: this.tabs[this.tabIndex].type,page: 1,per_page: 20}).then(res => {
					console.log(res);
				}).catch(err => err);
			},
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			//返回
			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
				}
			}
		},
		created() {
			this.getUserOrder()
		}
	}
</script>

<style>

</style>