效果图:
1、订单分类
<template> <div class="hello"> <h1>{{ msg }}</h1> <div class="cak-order"> <ul class="cak-menu"> <li v-for="(item,index) in menu" :class="{on:index==active}" @click="switchItem(item,index)">{{ item.text }}</li> </ul> <p v-for="(item,index) in alllist">商品名:{{ item.text }}、价格:{{ item.money }}、数量:{{ item.num }}、状态:{{ item.status }}</p> </div> <Evaluate></Evaluate> </div> </template> <script> import Evaluate from '@/components/Evaluate' export default { name: 'HelloWorld', data () { return { msg: 'vue-order', active:0, menu:[ {text:'全部订单'}, {text:'代付款'}, {text:'待发货'}, {text:'待收货'}, {text:'待评价'} ], alllist:[],//全部订单 pay:[], //代付款 send:[], //代发货 collect:[], //待收货 evaluate:[], //待评价 lists:[ {text:'商品1',money:4,num:4,status:0}, //status 0 待付款,1待发货,2待收货,3待评价 {text:'商品2',money:3,num:1,status:1}, {text:'商品3',money:4,num:2,status:2}, {text:'商品4',money:7,num:6,status:0}, {text:'商品4',money:7,num:6,status:3}, {text:'商品4',money:7,num:6,status:0}, {text:'商品4',money:7,num:6,status:3}, {text:'商品3',money:4,num:2,status:2}, {text:'商品3',money:4,num:2,status:2}, {text:'商品4',money:7,num:6,status:3}, ] } }, components: { Evaluate }, created(){ // 加载全部订单 this.alllist = this.lists for(var i =0;i<this.lists.length;i++){ //代付款 if(this.lists[i].status == 0){ this.pay.push(this.lists[i]) } //代发货 else if(this.lists[i].status == 1){ this.send.push(this.lists[i]) } //待收货 else if(this.lists[i].status == 2){ this.collect.push(this.lists[i]) } //待评价 else if(this.lists[i].status == 3){ this.evaluate.push(this.lists[i]) } } }, methods: { switchItem(item,index){ this.active = index switch(index){ case 0: this.alllist = this.lists console.log("全部订单") break; case 1: this.alllist = this.pay console.log("代付款") break; case 2: this.alllist = this.send console.log("待发货") break; case 3: this.alllist = this.collect console.log("待收货") break; case 4: this.alllist = this.evaluate console.log("待评价") break; } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .cak-menu li{ background-color: #eee; padding: 5px 10px; cursor:pointer; } .cak-menu li.on{ color:#fff; background-color: pink; } </style>
2、评分
<template> <ul> <li v-for="(name, index) in list"> <div class="score"> <span>{{name}}:</span> <i v-for="($item,$index) in 5" @click="washingCarScore(index,$index)" :class="{full:$index<=saveIndex[index]}"></i> <span>{{num[index]}}分</span> </div> </li> </ul> </template> <script> export default { data() { return{ saveIndex: [-1, -1, -1], list: ['商品','物流','客服'], num: [0, 0, 0], } }, methods:{ washingCarScore(type, index){ this.$set(this.saveIndex, type, index) this.$set(this.num, type, index+1) // $set(target,key,value) target:对象、数组; key:数组中第几个值; value:key改变的值==》 删除数组target中第key个值,添加新的value来代替 /*console.log(this.saveIndex) console.log(this.num)*/ } } } </script> <style> .score i{ display: inline-block; 24px; height: 24px; background: url(../../static/img/start-default.png); /*初始图片*/ background-size: 100%; } .score .full{background-image: url(../../static/img/start-full.png);} /*active图片*/ </style>