Sharing examples of imitating Taobao checkout page using vue.js

Although the most powerful part of Vue is component development, it is actually quite suitable for multi-page development. The following article is the example code of Vue that I will share with you to imitate Taobao checkout page. The main function is to imitate the settlement of Taobao page. This is a page that automatically calculates the total price when shopping for items in the shopping cart. I hope it can be helpful to everyone.

This demo is an updated demo based on the previous vue2.0 article on realizing full selection and inverse selection in the table. The main function is to automatically calculate the total when checking out the shopping cart items on the Taobao page. For the price page, please see the animation below for the specific page effect: (If you find any problems, please help Xiaoying correct the mistakes in time, thank you hehe)

Rendering:

Updated home.vue

##

<template>
 <p class="container">
 <p class="checkout-title">
  <span>购物车</span>
 </p>
 <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=&#39;checked&#39; @click=&#39;checkedAll&#39;>
   </td>
   <td width="7%" v-if="index!==0">
    <input type="checkbox" v-model=&#39;checkList&#39; :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>
 <p class="price_total_bottom">
  <p class="price_total_ms">
  <label>合计：{{allProductTotal}}</label>
  <router-link to="/userAddress">结账</router-link>
  </p>
 </p>
 </p>
</template>
<script>
import userAddress from &#39;./address&#39;
export default {
 components: {
 userAddress
 },
 data() {
 return {
  table_list: [{
  &#39;id&#39;: 0,
  &#39;product_inf&#39;: &#39;商品信息&#39;,
  &#39;product_price&#39;: &#39;商品金额&#39;,
  &#39;product_quantity&#39;: &#39;商品数量&#39;,
  &#39;total_amount&#39;: &#39;总金额&#39;
  }, {
  &#39;id&#39;: &#39;1&#39;,
  &#39;product_inf&#39;: &#39;女士银手链&#39;,
  &#39;product_price&#39;: 100,
  &#39;product_quantity&#39;: 10,
  &#39;total_amount&#39;: 1000
  }, {
  &#39;id&#39;: &#39;2&#39;,
  &#39;product_inf&#39;: &#39;女士银手镯&#39;,
  &#39;product_price&#39;: 200,
  &#39;product_quantity&#39;: 5,
  &#39;total_amount&#39;: 1000
  }, {
  &#39;id&#39;: &#39;3&#39;,
  &#39;product_inf&#39;: &#39;女士银耳环&#39;,
  &#39;product_price&#39;: 50,
  &#39;product_quantity&#39;: 10,
  &#39;total_amount&#39;: 500
  }],
  checked: false,
  allProductTotal: null,
  checkList: [&#39;1&#39;, &#39;3&#39;]
 }
 },
 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], &#39;checked&#39;, 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], &#39;checked&#39;, 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], &#39;checked&#39;, 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
 &#39;checkList&#39;: {
  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;
 background-color: #f71455;
}
</style>

Related recommendations:

An example of using JavaScript to imitate Taobao’s magnifying glass effect

Javascript imitating Taobao search box input event implementation

Using HTML to create a Taobao-like five-star review Example

The above is the detailed content of Sharing examples of imitating Taobao checkout page using vue.js. For more information, please follow other related articles on the PHP Chinese website!