<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.cart {
width: 50px;
height: 50px;
background: orangered;
text-align: center;
font-size: 20px;
position: fixed;
top: 400px;
right: 0;
}

.cart i {
color: #fff
}

.cart span {
display: block;
color: #fff;
}
</style>
</head>

<body>
<div id="app">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">珠峰购物车</a>
</div>
</div>
</div>

<div class="container">
<div class="col-md-3 text-center" @dragstart="start($event,index)" draggable="true" v-for="(product,index) in products">
<div class="panel panel-primary">
<div class="panel-heading" v-html="product.productName"></div>
<div class="panel-body">
<img :src="product.productCover" width="130px" height="140px" ref="img">
</div>
<div class="panel-footer">
价格 <span v-html="product.productPrice"></span>
</div>
</div>
</div>
<table class="table table-bordered">
<tr>
<th>
<input type="checkbox" v-model="checkall"> 全选</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="cart in carts">
<td>
<input type="checkbox" v-model="cart.isSelected">
</td>
<td v-html="cart.productName"></td>
<td v-html="cart.productPrice"></td>
<td>
<input type="text" v-model="cart.productCount">
</td>
<td v-html="cart.productPrice*cart.productCount"></td>
<td>
<button @click="remove(cart)" class="btn">删除</button>
</td>
</tr>
<tr>
<td colspan="6">
总价 <span v-html="sum | toInt"></span>
</td>
</tr>
</table>
</div>
<div class="cart" @drop="drop" @dragover.prevent>
<i class="glyphicon glyphicon-shopping-cart"></i>
<span v-html="count"></span>
</div>

</div>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
products: [],
current: '', //当前拖动的是哪个元素
carts: JSON.parse(localStorage.getItem('cartList')) || [],
},

filters: {
toInt(input) { // input = sum
return input.toFixed(2)
}
},
computed: {
count() {
return this.carts.reduce((prev, next) => {
return prev + parseInt(next.productCount);
}, 0)
},
checkall: {
get() { //如果products中有一个元素isSelected是false checkall则为false
//如果其中有一个返回为false 结果就是false
return this.carts.every(item => item.isSelected)
},
set(val) {
this.carts.forEach(item => item.isSelected = val)
}
},
sum() {
return this.carts.reduce((prev, next) => { //es5
if(next.isSelected) {
return prev + next.productCount * next.productPrice
} else {
return prev;
}
}, 0);
}
},
methods: {
remove(cart) { //filter过滤 如果返回true 表示留下并且放到一个新的数组里
this.carts = this.carts.filter(item => item != cart); //es5
},
start(e, index) { //e.dataTransfer.setDragImg
//ref this.$refs.img
// 低版本浏览器不识别 chrome 需要60+
let product = { ...this.products[index],
productCount: 1,
isSelected: true
};
this.current = product; //保存当前拖动的那个元素
e.dataTransfer.setDragImage(this.$refs.img[index], 0, 0)
},
drop() {
//如果当前购物车中 有 则累加数量即可 this.current.id == this.carts其中一项如果相等
if(this.carts.some(item => item.id == this.current.id)) {
this.carts.forEach(item => {
if(item.id == this.current.id) {
item.productCount++;
}
});
} else {
this.carts.push(this.current);
}
}
},
created() { //created中的this 也是vm
//箭头函数中没有this指向
axios.get('./products.json').then(res => {
this.products = res.data;
})
},
});
</script>
</body>

</html>

vue购物车功能源码的更多相关文章

  1. 出售Illustrator脚本插件面板（包含面板源码，以及面板上所有的功能源码）

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  2. ios自动滚动图片功能源码

    源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...

  3. 微信跳转外部浏览器打开指定H5链接的功能源码

    通常大家在微信内转发分享H5链接的时候都很容易碰到H5链接在微信内无法打开或在微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要 ...

  4. 微信最新跳转浏览器功能源码，实现微信内跳转手机浏览器访问网页url

    微信最新自动跳转外部浏览器下载app/打开指定页面源码 源码说明: 适用安卓和苹果系统,支持任何网页链接.并且无论链接是否已经被微信拦截,均可实现微信内自动跳转浏览器打开. 生成的跳转链接具有极佳的防 ...

  5. Java中分页功能源码实例

    一.源码(后附使用说明) package com.zhiyou100.crm.util; /** * 分页功能 * @author YangXianSheng * */ public class Pa ...

  6. python实现最简单的计算器功能源码

    import re def calc(formula): formula = re.sub(' ', '', formula) formula_ret = 0 match_brackets = re. ...

  7. .net 邮件批量发送功能源码

    #define debug   using System; using System.Text; using System.Linq; using System.IO; using System.Ne ...

  8. 构建NetCore应用框架之实战篇（七）：BitAdminCore框架登录功能源码解读

    本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.简介 1.登录功能完成后,框架的雏形已经形成,有必要进行复习. 2 ...

  9. 开源安卓Android流媒体音视频播放器实现声音自动停止、恢复、一键静音功能源码

    本文转自EasyDarwin团队John的博客:http://blog.csdn.net/jyt0551/article/details/60802145 我们在开发安卓Android流媒体音视频播放 ...

随机推荐

  1. Http_code码

    _codes = { : (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: (: ...

  2. C# widget

    Invoke(Delegate)的用法: //例如,要实时update窗体.如果在另一个线程中update,那么可以直接update(可以不在新线程中):也可以在Delegate中给出upate,然后 ...

  3. hdu 1115 Lifting the Stone 多边形的重心

    Lifting the Stone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. Intellij idea注册码失效

    从网上下载idea需要输入激活码,晚上用的激活码大多是同一个,但是上次使用的时候突然弹窗告诉我注册码失效了,在网上找到一个新的方法 在注册界面有几个选项,我们常用的是Activation Code,现 ...

  5. mongdb学习笔记

    1.MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的 2.支持动态查询 3.使用高效的二进制数据存储,包括大型对象(如视频等) 4.文件存储格 ...

  6. SpringBoot学习路线

    网上也有很多github资源,都是自己学习Spring Boot时候,自己练的代码 虽然现在最新的版本用2.1.3.RELEASE版本,以前版本的demo运行可能会遇到错误.但是有总比没有要好,不是么 ...

  7. rm

    rm [选项]... 目录... 删除指定的<文件>(即解除链接). -d      --directory    删除可能仍有数据的目录 (只限超级用户)-f      --force  ...

  8. ps p图

    1. 常用快捷键 ctrl + 单击 选中图层ctrl + j 复制出拷贝的图层 Shift+Alt+S 保存ctrl + s 保存shift + ctrl + alt + s 保存为 web 格式图 ...

  9. c# 7.0 学习笔记

    refer : https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-7 out 可以写在里面了 // int result ...

  10. mybatis-generator-core 自动生成实体和Mapper

    所谓mybatis-generator-core就是利用mybatis-generator-core.jar自动生成数据库对应的实体和映射文件.首先要下载mybatis-generator-core- ...