订单分类和评分--vue.js学习笔记2

效果图：

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;
    width: 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>