需求:我的订单组件接受到了来自不同状态的订单列表,我的按钮需要根据不同的订单改变,
.当然上面的需求可以根据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方法进行替换,这样按钮数组和数据数组就是同步展示,并且事件绑定也是根据传递