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 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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 文件上传类代码
2011/08/06 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
原生js实现日期联动
2015/01/12 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python编写一个优美的下载器
2018/04/15 Python
python求质数的3种方法
2018/09/28 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
幼儿园教师请假制度
2014/01/16 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
北京奥运会口号
2014/06/21 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
MySQL去除密码登录告警的方法
2022/04/20 MySQL