vue仿淘宝结账订单

<template>

 <div class="container">

 <div class="checkout-title">

  <span>购物车</span>

 </div>

 <table class="product_table">

  <tbody>

  <template v-for="(list,index) in table_list">

   <tr>

   <td width="7%" min-width="94px" v-if="index===0">

    <input type="checkbox" v-model='checked' @click='checkedAll'>

   </td>

   <td width="7%" v-if="index!==0">

    <input type="checkbox" v-model='checkList' :value="list.id" @click=checkProductFun(index,$event)>

   </td>

   <td width="43%">{{list.product_inf}}</td>

   <td width="10%" v-if="index===0">{{list.product_price}}</td>

   <td width="10%" v-if="index!==0">¥{{list.product_price}}</td>

   <td width="10%" v-if="index===0">{{list.product_quantity}}</td>

   <td width="10%" v-if="index!==0">

    <a class="numbers plus" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="changeMoney(index,-1)">-</a>

    <input class="txt_number" type="text" v-model="list.product_quantity" size="1" disabled>

    <a class="numbers reduce" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="changeMoney(index,1)">+</a>

   </td>

   <td width="10%">{{list.total_amount}}</td>

   <td width="20%" v-if="index===0">编辑</td>

   <td width="20%" v-if="index!==0">

    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="update">修改</a>

    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="delete">删除</a>

   </td>

   </tr>

  </template>

  </tbody>

 </table>

 <div class="price_total_bottom">

  <div class="price_total_ms">

  <label>合计：{{allProductTotal}}</label>

  <router-link to="/userAddress">结账</router-link>

  </div>

 </div>

 </div>

</template>

<script>

import userAddress from './address'

export default {

 components: {

 userAddress

 },

 data() {

 return {

  table_list: [{

  'id': 0,

  'product_inf': '商品信息',

  'product_price': '商品金额',

  'product_quantity': '商品数量',

  'total_amount': '总金额'

  }, {

  'id': '1',

  'product_inf': '女士银手链',

  'product_price': 100,

  'product_quantity': 10,

  'total_amount': 1000

  }, {

  'id': '2',

  'product_inf': '女士银手镯',

  'product_price': 200,

  'product_quantity': 5,

  'total_amount': 1000

  }, {

  'id': '3',

  'product_inf': '女士银耳环',

  'product_price': 50,

  'product_quantity': 10,

  'total_amount': 500

  }],

  checked: false,

  allProductTotal: null,

  checkList: ['1', '3']

 }

 },

 mounted: function() {

 var _this = this;

 // 根据data中默认勾选的checkbox，计算当前勾选的商品总价

 _this.allProductTotal = 0;

 this.checkList.forEach(function(element1, index1) {

  _this.table_list.forEach(function(element2, index2) {

  if (element1 == element2.id) {

   _this.$set(_this.table_list[index2], 'checked', true);

   _this.allProductTotal += element2.product_price * element2.product_quantity;

  }

  });

 });

 },

 methods: {

 checkedAll: function() {

  var _this = this;

  _this.allProductTotal = 0;

  if (_this.checked) { //实现反选

  _this.checkList = [];

  _this.table_list.forEach(function(item, index) {

   if (_this.table_list[index].checked) {

   _this.table_list[index].checked = false;

   }

  });

  } else { //实现全选

  _this.checkList = [];

  _this.table_list.forEach(function(item, index) {

   if (index > 0) {

   _this.checkList.push(item.id);

   if (!_this.table_list[index].checked) {

    _this.$set(_this.table_list[index], 'checked', true);

   } else {

    _this.table_list[index].checked = true;

   }

   if (item.checked) {

    _this.allProductTotal += item.product_price * item.product_quantity;

   }

   }

  });

  }

 },

 checkProductFun(index, event) { //根据checkbox是否勾选，计算勾选后的商品总价

  var _this = this;

  _this.allProductTotal = 0;

  if (event.target.checked) {

  if (!_this.table_list[index].checked) {

   _this.$set(_this.table_list[index], 'checked', true);

  }

  } else {

  if (_this.table_list[index].checked) {

   _this.table_list[index].checked = false;

  }

  }

  this.table_list.forEach(function(item, index) {

  if (item.checked) {

   _this.allProductTotal += item.product_price * item.product_quantity;

  }

  });

 },

 changeMoney: function(index, way) {

  if (way > 0) {

  this.table_list[index].product_quantity++;

  } else {

  this.table_list[index].product_quantity--;

  if (this.table_list[index].product_quantity < 1) {

   this.table_list[index].product_quantity = 1;

  }

  }

  this.calcTotalPrice();

 },

 calcTotalPrice: function() {

  var _this = this;

  _this.allProductTotal = 0;

  this.table_list.forEach(function(item, index) {

  if (index > 0) { //因为第一行为表头不需要进行计算

   item.total_amount = item.product_price * item.product_quantity; //根据商品数量计算每一个商品对应的总金额

  }

  if (item.checked) {

   _this.allProductTotal += item.product_price * item.product_quantity; //根据是否否选该商品的checkbox，计算总价

  }

  });

 },

 },

 watch: { //深度 watcher

 'checkList': {

  handler: function(val, oldVal) {

  if (val.length === this.table_list.length - 1) {

   this.checked = true;

  } else {

   this.checked = false;

  }

  },

  deep: true

 }

 }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.container {

 padding: 69px 0 54px 0;

}

table {

 border-collapse: collapse;

 border-color: transparent;

 text-align: center;

}

.product_table,

.product_table tbody {

  100%

}

.product_table tr:first-child {

 background: #ece6e6;

 color: #e66280;

 font-size: 20px;

}

.product_table td {

 border: 1px solid #f3e8e8;

 height: 62px;

 line-height: 62px;

}

.product_table a.update:link,

.product_table a.update:visited,

.product_table a.update:hover,

.product_table a.update:active {

 color: #1CE24A;

}

.product_table a.delete:link,

.product_table a.delete:visited,

.product_table a.delete:hover,

.product_table a.delete:active {

 color: #ffa700;

}

.product_table .txt_number {

 text-align: center;

}

.product_table .numbers {

 font-weight: bold;

}

.price_total_bottom {

 font-size: 20px;

 padding: 20px 10px;

}

.price_total_ms {

 text-align: right;

}

.price_total_bottom .price_total_ms label {

 margin-right: 100px;

}

.price_total_bottom .price_total_ms a {

 cursor: default;

 text-align: center;

 display: inline-block;

 font-size: 20px;

 color: #fff;

 font-weight: bold;

  220px;

 height: 54px;

 line-height: 54px;

 border: 0;

  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#f71455;

}

</style>