food_wechat/pages/main/order.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar title="订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- tab -->
		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb pr">
			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
				:class="current===index?'fb':''">
				<view class="pr">
					<badge :cou="orderCouArr[index]"></badge>
					{{tab}}
				</view>
			</view>
		</view>
		<!-- tabLine -->
		<view class="tabLineBox flex mac mc z-top" :style="{ left: tabLineLeft + 'rpx' }">
			<view class="tabLine rad8 bg-m"></view>
		</view>
		<!-- 订单页 swiper -->
		<swiper class="swiperClass m-t-12" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiperClass">
				<scroll-view scroll-y class="swiperClass">
					<view v-if="orderList_unpaid.length>0">
						<orderItem v-for="order in orderList_unpaid" :order=order :key="order.id"></orderItem>
						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
						<view class="extra-space2"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperClass">
				<scroll-view scroll-y class="swiperClass">
					<view v-if="orderList_paid.length>0">
						<orderItem v-for="order in orderList_paid" :order=order :key="order.id"></orderItem>
						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
						<view class="extra-space2"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperClass">
				<scroll-view scroll-y class="swiperClass">
					<view v-if="orderList_refund.length>0">
						<orderItem v-for="order in orderList_refund" :order=order :key="order.id"></orderItem>
						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
						<view class="extra-space2"></view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['待支付', '已付款', '退款售后'], // tab标签
				current: 1, //当前激活标签
				tabLineLeft: 24 ,//tabLine 样式表的left值
			}
		},
		onLoad() {
			//初始化 tapline的位置
			this.lineOffset(this.current)
		},
		computed: {
			//未付款订单
			orderList_unpaid() {
				return this.$store.state.orderList.filter(item => item.main_status === '未付款')
			},
			//已付款 已完成 并且没有申请退款的订单
			orderList_paid() {
				return this.$store.state.orderList.filter(item => {
					return item.main_status === '已付款' && item.refund_status === '未申请';
				})
			},
			//申请中 已同意 主动退 拒绝退 等退款相关的订单
			orderList_refund() {
				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
			},
			//订单数量 数组[未付款订单数量,已付款没有产生退款相关业务的订单数量,申请中 已同意 主动退 等退款的订单数量]
			orderCouArr() {
				return [this.orderList_unpaid.length, this.orderList_paid.length, this.orderList_refund.length]
			}
		},
		methods: {
			//点击tab标签时 设置current
			handlerTab(index) {
				this.current = index
			},
			// swiper滑动结束，设置current
			animationfinish(e) {
				this.current = e.detail.current
			},
			//计算每个 tabLine 的left值
			lineOffset(val) {
				// 计算每个 tabLine 的left值
				const tabWidth = 200
				const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
					1) // 750是屏幕宽度，48是左右边距
				this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
			}
		},
		watch: {
			current: {
				handler(val) {
					//更新tapline 的位置
					this.lineOffset(val)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabListBox {
		height: 77rpx;
	}

	.tabBox {
		width: 200rpx;
		height: 77rpx;
	}

	.tabLineBox {
		width: 200rpx;
		height: 8rpx;
		position: absolute;
		transition: all .2s ease;
	}

	.tabLine {
		width: 70rpx;
		height: 8rpx;
	}

	.swiperClass {
		height: calc(100vh - 297rpx);
	}
</style>