Teilen Sie Beispiele für die Nachahmung der Taobao-Checkout-Seite mithilfe von vue.js

Obwohl der leistungsstärkste Teil von Vue die Komponentenentwicklung ist, eignet er sich tatsächlich gut für die mehrseitige Entwicklung. Der folgende Artikel ist der Beispielcode von Vue, den ich mit Ihnen teilen werde, um die Taobao-Checkout-Seite zu imitieren Um die Abrechnung der Taobao-Seite nachzuahmen, ist dies eine Seite, die beim Einkauf von Artikeln im Warenkorb automatisch den Gesamtpreis berechnet.

Diese Demo ist eine aktualisierte Demo, die auf dem vorherigen vue2.0-Artikel zur Realisierung der vollständigen Auswahl und der umgekehrten Auswahl in der Tabelle basiert. Die Hauptfunktion besteht darin, die Gesamtsumme beim Auschecken der Warenkorbartikel auf Taobao automatisch zu berechnen Seite. Preisseite, bitte sehen Sie sich die Animation unten für den spezifischen Seiteneffekt an: (Wenn Sie irgendwelche Probleme finden, helfen Sie Xiaoying bitte rechtzeitig, die Fehler zu korrigieren, danke hehe)

Rendering:

Home.vue aktualisiert

<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>

Verwandte Empfehlungen:

An Beispiel für die Verwendung von JavaScript zur Nachahmung des Lupeneffekts von Taobao

Implementierung des Eingabeereignisses von JavaScript, das das Taobao-Suchfeld imitiert

Verwendung von HTML zum Erstellen eines Taobao -ähnlicher Effekt Fünf-Sterne-Bewertungsbeispiele

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Nachahmung der Taobao-Checkout-Seite mithilfe von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!