vue实现仿淘宝结账页面实例代码


Posted in Javascript onNovember 08, 2017

虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的。下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文。

这个demo,是小编基于之前的 vue2.0在table中实现全选和反选  文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图:(如果大家发现有什么问题请及时提出帮小颖改正错误呦,谢谢啦嘻嘻)

效果图:

vue实现仿淘宝结账页面实例代码

更新后的home.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;
 background-color: #f71455;
}
</style>

总结

以上所述是小编给大家介绍的vue实现仿淘宝结账页面实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
AngularJS入门之动画
Jul 27 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
vue-router路由与页面间导航实例解析
Nov 07 #Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 #Javascript
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
小学班主任寄语大全
2014/04/04 职场文书
房地产开发项目建议书
2014/05/16 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js