请问下面的按钮如何优雅的去判断,
//status -1,0,10,20,50
-1
订单详情
0
订单详情
去支付
取消订单
10
订单详情
取消
20
订单详情
50
订单详情
评价
申请退款
申请发票
<div class="item" v-for="(item,index) in orderList">
<div class="r align-self-center">
<div class="btn" v-if="item.status">订单详情</div>
<div class="btn">去支付</div>
<div class="btn">申请退款</div>
<div class="btn">发票申请</div>
<div class="btn">取消订单</div>
</div>
</div>
###第一步、给使用舰队保存菜单项,name为名称,handleClick为点击触发的函数
data(){
return {
permissionObj : {
0:{name:"订单详情",handleClick:()=>{}},
1:{name:"去支付",handleClick:()=>{}},
2:{name:"取消订单",handleClick:()=>{}},
3:{name:"评价",handleClick:()=>{}},
4:{name:"申请退款",handleClick:()=>{}},
5:{name:"发票申请",handleClick:()=>{}},
},
orderList:[]
}
}
第二步,通过接口查询用户权限,比如在mounted之后请求接口又或者在vuex当中读取权限
axios.then((res)=>{
const permissionCode = res.permissionCode;
this.orderList.length = 0;// 这里设置0,再push是为了强制渲染视图
this.orderList.push(...(()=>{ // 设置权限
switch(permissionCode){
case -1:
case 20:
return [0];
case 0:
return [0,1,2];
case 10:
return [0,2];
case 50:
return [0,3,4,5];
}
})().map(item=>this.permissionObj[item])
)
})
第三步,html
<div class="item">
<div class="r align-self-center">
<div class="btn" v-for="(item,index) in orderList" @click="item.handleClick" >{{item.name}}</div>
</div>
</div>
###我喜欢这么干
order.canPay = function(){return (this.status === 0)}
order.canRefund = function(){return (this.status === 50)}
order.canInvoice = function(){return (this.status === 50)}
order.canCancel = function(){return (this.status === 0 || item.status === 10)}
order.canFeedback = function(){return (this.status === 50)}
<div class="r align-self-center">
<div class="btn">订单详情</div>
<div class="btn" v-if="item.canPay()"去支付</div>
<div class="btn" v-if="item.canRefund()">申请退款</div>
<div class="btn" v-if="item.canInvoice()">发票申请</div>
<div class="btn" v-if="item.canCancel()">取消订单</div>
<div class="btn" v-if="item.canFeedback()">评价</div>
</div>
###<div class="r align-self-center">
<div class="btn">订单详情</div>
<div class="btn" v-if="item.status === 0">去支付</div>
<div class="btn" v-if="item.status === 50">申请退款</div>
<div class="btn" v-if="item.status === 50">发票申请</div>
<div class="btn" v-if="item.status === 0 || item.status === 10">取消订单</div>
<div class="btn" v-if="item.status === 50">评价</div>
</div>