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

转载于:https://www.cnblogs.com/tis100204/p/10442449.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页