主要逻辑

    1. checkAll: {
    2.       get() {
    3.         return this.products.every(item => item.isSelected);
    4.       },
    5.       set(val) {
    6.         this.products.forEach(item => (item.isSelected = val));
    7.       }
    8.     },
    1. <template>
    2.   <div class="content">
    3.     <h2>购物车</h2>
    4.     <van-swipe :autoplay="3000" indicator-color="white">
    5.       <van-swipe-item v-for="(item,i) of products" :key="i">
    6.         <img class="swiper" :src="item.productCover" alt @click="toggle(i)" />
    7.       </van-swipe-item>
    8.     </van-swipe>
    9.     <div class="item" v-for="item of products" :key="item.id">
    10.       <van-checkbox class="checkAll" v-model="item.isSelected"></van-checkbox>
    11.       <van-stepper
    12.         class="num"
    13.         v-model="item.productCount"
    14.         input-width="20px"
    15.         button-size="20px"
    16.         integer
    17.       />
    18.       <van-card
    19.         :price="item.productPrice"
    20.         :desc="item.productInfo"
    21.         :title="item.productName"
    22.         :thumb="item.productCover"
    23.       >
    24.         <div slot="bottom">小计:{{item.productPrice*item.productCount | money(2)}}</div>
    25.         <div slot="footer">
    26.           <van-button size="mini" type="danger" @click="handledelete(item)">删除</van-button>
    27.         </div>
    28.       </van-card>
    29.     </div>
    31.     <van-submit-bar :price="sum" button-text="提交订单">
    32.       <van-checkbox v-model="checkAll">全选</van-checkbox>
    33.     </van-submit-bar>
    34.   </div>
    35. </template>
    37. <script>
    38. import { Dialog } from 'vant';
    39. import { ImagePreview } from "vant";
    40. export default {
    41.   name: "cart",
    42.   data() {
    43.     return {
    44.       products: [],
    45.       img: []
    46.     };
    47.   },
    48.   mounted() {
    49.     this.axios.get("http://yapi.demo.qunar.com/mock/34614/").then(res => {
    50.       this.products = res.data;
    51.       this.products.forEach(item => {
    52.         this.img.push(item.productCover);
    53.       });
    54.     });
    55.   },
    56.   computed: {
    57.     checkAll: {
    58.       get() {
    59.         return this.products.every(item => item.isSelected);
    60.       },
    61.       set(val) {
    62.         this.products.forEach(item => (item.isSelected = val));
    63.       }
    64.     },
    65.     sum() {
    66.       var total = 0;
    67.       for (let i = 0; i < this.products.length; i++) {
    68.         if (this.products[i].isSelected) {
    69.           total =
    70.             total +
    71.             this.products[i].productCount * this.products[i].productPrice;
    72.         } else {
    73.           continue;
    74.         }
    75.       }
    76.       return total * 100;
    77.     }
    78.   },
    80.   methods: {
    81.     handledelete(item) {
    82.       Dialog.confirm({
    83.         title: "提示",
    84.         message: "确认删除"
    85.       })
    86.         .then(() => {
    87.           var products = this.products.filter(value => value !== item);
    88.           this.products = products;
    89.         })
    90.         .catch(() => {
    91.           // on cancel
    92.         });
    93.     },
    94.     toggle(index) {
    95.       ImagePreview({
    96.         images: this.img,
    97.         startPosition: index
    98.       });
    99.     }
    100.   }
    101. };
    102. </script>