使用computed计算属性,完成根据不同状态切换按钮

需求:我的订单组件接受到了来自不同状态的订单列表,我的按钮需要根据不同的订单改变,

.当然上面的需求可以根据v-if else 来解决,但是这里使用computed来完成的化话就要方便很多
所以解决思路,使用computed创建对应按钮列表来实现
我的订货组件
orders.vue

<template>
	<!-- 后续可以根据组件化来实现状态不同,数据也不相同来展示 这里可以封装为组件-->
	<view class="order-main-item" v-for="(item,index) in OrderList" :key='index'>
	<!-- 商品信息 -->
	<view class="order-info">
		<!-- 商品状态 -->
	<view class="info-status">
	  <!-- 店家信息 -->
	  <view class="info-status-shopper">
	  	<image :src="item.shopperAvater" mode="" class="shopper-img"></image>
		<!-- 店名 -->
		<view class="shopper-name">
			{{item.shopperName}}
		</view>
		<view class="iconfont icon-xiaoxizhongxin f-color">
			
		</view>
	  </view>
	  <!-- 支付状态 -->
	  <view class="info-status-sta  f-color-active">
	  	{{item.status}}
	  </view>
	</view>	
	<!-- 订单的具体内容 -->
	<view class="info-content">
		<image :src="item.goodImg" class="content-img"></image>
		<view class="content-info">
			<view class="info-text">
			{{item.goodName}}	
			</view>
			<view class="info-type f-color">
				{{item.type}}
			</view>
		</view>
		<!-- 价格和数量些 -->
		<view class="content-priceAndNum">
			<view class="content-price">
				￥{{item.total}}
			</view>
			<view class="content-num">
				*{{item.num}}
			</view>
			<view class="content-promise">
			{{item.promise}}
			</view>
		</view>
	</view>
	
	</view>
	<!-- 金额 -->
	<view class="order-pay">
		订单金额:￥<text class="f-color">{{item.total}}</text>(包含运费)
		
	</view>
	<line></line>
	<!-- 支付按钮 -->
	<view class="order-bt">
		<view class="bt-cancel f-color"  v-show="item.status==='待支付'">
			取消订单
		</view>
	<view class="bt-confirm f-color-active"  @click="btactive(item.status,item.id)">
		{{btActions[index]}}
	</view>
		
	</view>	
	</view>
	
	
	
	<!-- 如果没有数据显示  该区域-->
	<div class="when-Nodata" v-show="OrderList.length==0">
		<view class="nodata-div">
			您还没有相关订单
			<view class="Nodata-button" @click="goIndex()">
				去首页逛逛
			</view>
		</view>
		       
		
	</div>
</template>

js

<script setup>
	import {computed, defineProps, reactive, ref} from 'vue'
	import{onLoad} from '@dcloudio/uni-app'
const props=	defineProps({
	data:{
	  type:Array,
	  required:true
	}
});

const OrderList=props.data;
//计算属性真的重要
const btactive=(s,id)=>{
	//通过传递的不同status和id来完成对应执行逻辑
};
onLoad(()=>{
	console.log("初始化接受数据,",props.data)
	
});
    // 根据单个订单状态来获取按钮文本
    const getButtonAction = (status) => {
        switch(status) {
            case '待支付':
                return '支付';
            case '待收货':
                return '查看取件码'; // 或者你可能想要返回'已支付'或其他文本
            case '待发货':
                return '催一下';
            // 添加其他状态
            default:
                return '去评论';  // 完成订单
        }
    };

    // 为每个订单单独计算按钮文本
    var btActions = computed(() => {
        if (OrderList.length === 0) return [];
        return OrderList.map(order => getButtonAction(order.status));
    });



const goIndex=()=>{
	uni.showLoading({
		success() {
				uni.switchTab({
					url:'/pages/index/index'
				})
		},
		title:'努力加载中'
	})
	setTimeout(()=>{
	uni.hideLoading();		
	},1500)

	
}
</script>

根据计算属性,计算出一个对应的按钮列表,并且使用数组的map方法进行替换,这样按钮数组和数据数组就是同步展示,并且事件绑定也是根据传递