food_wechat/pages/order/index.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar
		  title="订单"
		  bgColor="#d43030"
		  :titleStyle="{ color: '#FFF' }"
		  :autoBack="false" 
		  placeholder
		>
		  <view class="u-nav-slot" slot="left" @click="onBackClick">
		    <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-24" :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() {
			//更新订订单列表
			this.$store.dispatch('fetchOrderList')
			//初始化 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: {
			// 自定义返回按钮点击事件
			onBackClick() {
				const pages = getCurrentPages() // 获取当前页面栈
				if (pages.length === 1) {
				  // 如果当前页面是栈中的唯一页面，跳转到首页
				  uni.reLaunch({
					url: '/pages/index/index', // 跳转到首页
				  })
				} else {
				  // 否则返回上一页
				  uni.navigateBack({
					delta: 1, // 返回上一页
				  })
				}
			},
			//点击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>