Partager des exemples d'imitation de la page de paiement Taobao à l'aide de vue.js

Bien que la partie la plus puissante de Vue soit le développement de composants, elle est en fait tout à fait adaptée au développement multipage. L'article suivant est l'exemple de code de Vue que je partagerai avec vous pour imiter la page de paiement Taobao. pour imiter le règlement de la page Taobao. Il s'agit d'une page qui calcule automatiquement le prix total lors de l'achat d'articles dans le panier. J'espère que cela pourra aider tout le monde.

Cette démo est une démo mise à jour basée sur l'article précédent de vue2.0 sur la réalisation d'une sélection complète et d'une sélection inverse dans le tableau. La fonction principale est de calculer automatiquement le total lors de la vérification des articles du panier sur Taobao. Page de prix, veuillez voir l'animation ci-dessous pour l'effet de page spécifique : (Si vous rencontrez des problèmes, veuillez aider Xiaoying à corriger les erreurs à temps, merci hehe)

Rendu :

home.vue mis à jour

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

Recommandations associées :

Un exemple d'utilisation de JavaScript pour imiter l'effet de loupe de Taobao

Implémentation de l'événement d'entrée du champ de recherche imitant Taobao de JavaScript

Utilisation de HTML pour créer un Taobao -like effect Exemples d'évaluation cinq étoiles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!