• 使用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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

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

  • 相关阅读:
    集合:(ArrayList)的插值和去重,包含(Iterator和listIterator)迭代器相关使用
    OpenMesh 计算封闭网格体积
    机械臂<四大家族>你知道多少
    Java NIO模型(提供代码示例)
    6.2 Sunday搜索内存特征
    11. 盛最多水的容器
    python3.8及以上版本绑定gdal库的一个注意事项
    C++标准库之:IO库
    理解Attention机制的query key value
    【论文笔记】MiniSeg: An Extremely Minimum Network for Efficient COVID-19 Segmentation
  • 原文地址:https://blog.csdn.net/qq_55272229/article/details/132747481