1. <template>
    2.   <div class="home">
    3.     <div class="item" v-for="(item,index) of list" :key="item.id">
    4.       <van-checkbox icon-size="15px" class="font-check" v-model="item.isSelected">单选</van-checkbox>
    5.       <div class="wrap">
    6.         <van-card
    7.   :price="item.productPrice"
    8.   :desc="item.productInfo"
    9.   :title="item.productName"
    10.   :thumb="item.productCover"
    11. />
    12.         <van-button @click="handleDet(index)" class="delete" size="mini" type="danger">删除</van-button>
    13.          <van-stepper class="count" input-width="30px" button-size="17px" v-model="item.productCount" />
    14.          <p class="sum">小计：{{item.productPrice*item.productCount}}元</p>
    15.       </div>
    16.     </div>
    17.     <van-submit-bar
    18.   :price="sum*100"
    19.   button-text="提交订单"
    20. >
    21.   <van-checkbox v-model="checkAll">全选</van-checkbox>
    22. </van-submit-bar>
    23.   </div>
    24. </template>
    26. <script>
    27. import axios from 'axios';
    28. export default {
    29.   name: 'home',
    30.   data(){
    31.     return{
    32.       list:[]
    33.     }
    34.   },
    35.   mounted(){
    36.     axios.get("http://yapi.demo.qunar.com/mock/36046/cart").then(res=>{
    37.       this.list = res.data;
    38.       console.log(this.list)
    39.     })
    40.   },
    41.   computed: {
    42.     sum(){
    43.       var total =0;
    44.       this.list.forEach(item=>{
    45.         if(item.isSelected){
    46.           total = item.productCount*item.productPrice+total;
    47.         }
    48.       })
    49.       return total
    50.     },
    51.     checkAll:{
    52.       get(){
    53.         return this.list.every(item=>item.isSelected)
    54.       },
    55.       set(val){
    56.         this.list.forEach(item=>item.isSelected=val)
    57.       }
    58.     }
    59.   },
    60.   methods:{
    61.     handleDet(index){
    62.       this.list.splice(index,1)
    63.     }
    64.   }
    65. }
    66. </script>
    67. <style scoped>
    68. .item{
    69.   margin-top: 20px;
    70. }
    71. .font-check{
    72.   font-size: 20px;
    73. }
    74. .wrap{
    75.   position: relative;
    76. }
    77. .count{
    78.   position: absolute;
    79.   top: 50px;
    80.   left: 200px;
    81. }
    82. .delete{
    83.   position: absolute;
    84.   top: 50px;
    85.   left: 290px;
    86. }
    87. .sum{
    88.   position:absolute;
    89.   top: 60px;
    90.   left: 230px;
    91.   font-size: 15px;
    92. }
    93. </style>