uniapp中订单状态的思想记录

记录思想啊……

order.vue
思想：把每种订单状态列表数据组织到tab栏数据下，这样更容易切换不同状态。

<template>
	<view>
		<!-- 订单导航 -->
		<order-nav :tabNavBars="tabNavBars" :activeIndex="activeIndex" navColor="#58c7d1" @changeAct="changeOrderNavAct"></order-nav>

		<!-- 订单列表 -->
		<block v-for="(item, index) in tabNavBars" :key="index">
			<view class="" v-if="index === activeIndex">
				<!-- 无订单显示的内容 -->
				<block v-if="item.list.length === 0">
					<view class="no-order">
						<image :src="item.noOrderImg" mode="" class="no-order-img"></image>
						<view class="no-order-text">{{ item.noOrderTips }}</view>
					</view>
				</block>

				<!-- 对应的订单列表详情 -->
				<block v-else>
					<view v-for="(item2, index2) in item.list" :key="index2">{{ item2 }}</view>
				</block>
			</view>
		</block>
	</view>
</template>
<script>
import orderNav from '../../components/order/order-nav.vue';
export default {
	name: 'Order',
	data() {
		return {
			// 导航列表,思想啊！是把每种订单状态下对应订单列表直接组织到订单导航列表里了。
			tabNavBars: [
				{
					name: '全部',
					noOrderImg: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875885761,2373220900&fm=26&gp=0.jpg',
					noOrderTips: '您还没有订单哦~',
					list: ['这是全部订单列表']//该订单状态下数据。
				},
				{
					name: '待付款',
					noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待付款订单哦~',
					list: []
				},
				{
					name: '待收货',
					noOrderImg: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1148236422,1147879121&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待收货订单哦~',
					list: ['待收货订单列表']
				},
				{
					name: '待评价',
					noOrderImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1504800501,1844087668&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待评价订单哦~',
					list: []
				}
			],
			// 全部订单的索引下标 默认显示
			activeIndex: 0
		};
	},
	components: {
		orderNav
	},
	methods: {
		changeOrderNavAct(index) {
			// console.log(index);
			// 改变导航的激活样式根据索引下标
			this.activeIndex = index;
		}
	}
};
</script>
<style lang="scss" scoped>
// 无相关订单的时候
.no-order {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 350rpx;
	.no-order-img {
		margin-top: 20rpx;
		width: 280rpx;
		height: 280rpx;
		border: solid 1rpx #e8e8e8;
	}
	.no-order-text {
		font-size: 20rpx;
		margin-top: 10rpx;
		color: #999999;
	}
}
</style>

orderNav.vue 封装的组件，tab切换也会经常用到的

<template>
	<view class="order-nav">
		<view class="nav">
		<view class="nav-list" v-for="(item,index) in tabNavBars" :key="index"  @click="changeActiveNav(index)" :style="activeIndex===index?actColor:''">
			{{item.name}}
		</view>
	</view>
	</view>
</template>
<script>
	export default{
		props:{
			// 导航列表数据
			tabNavBars:{
				type:Array,
				default:[]
			},
			//激活的颜色样式
			navColor:{
				type:String,
				default:'#4CD964'
			},
			
			// 默认激活样式的下标
			activeIndex:{
				type:Number,
				default:0
			}	
		},
		computed:{
			// 添加的激活样式这是，思想啊……动态绑定样式的时候使用计算属性
			actColor(){
				return `color:${this.navColor};border-bottom: solid 5rpx ${this.navColor};box-sizing:border-box`
			}
		},
		methods:{
			// 改变激活样式
			changeActiveNav(index){
				// 其它业务逻辑
				this.$emit('changeAct',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav{
		display: flex;
		border-bottom: solid 1rpx #e1e1e1;
		color: #999999;
		.nav-list{
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0 20rpx  0;
			font-size: 33rpx;
			box-sizing: border-box;
		}
	}
</style>