<!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. Java基础 --Unix与Mac系统 文件路径分隔符（一）

    斜杠‘/’与反斜杠‘\’在不同系统的使用 1)Window平台使用反斜杠'\'作为文件层级分隔符:Windows使用反斜杠作为DOS命令提示符的参数标志,随着发展DOS命令符逐渐被淘汰,大部分情况下斜 ...

  2. hdu 5724 Chess 博弈sg+状态压缩

    Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem De ...

  3. FZU oj 2277 Change 树状数组+dfs序

    Problem 2277 Change Time Limit: 2000 mSec    Memory Limit : 262144 KB  Problem Description There is ...

  4. Windows下Apache服务器搭建

    Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,是世界使用排名第一的Web服务器软件,可以在大多数计算机操作系统中运行,由于其多平台和安全性 ...

  5. Digits of Factorial LightOJ - 1045

    题目就不再发了,大致意思就是给你一个十进制数n,算出阶乘后转换成K进制的数,你来算一下它的位数. 坑点在哪呢,就是这个数可能算阶乘的时候没放弄了,比如1000000,做过最多单算阶乘的题也就是让你算到 ...

  6. 封装sqlhelper【一】

    控件信息展示: //定义调用数据库类文件 namespace SqlHelper { public class TblClass { public int classId { get; set; } ...

  7. VC异常.简单抛，简单捕获

    1.ZC:始终没有找到,能像Delphi7里面那样能抛 字符串描述 的异常信息.(难道Delphi是这样做的?:在程序的最外围 套了一层异常捕获,然后在获取到异常之后,自己再将异常信息弹出来,我们写的 ...

  8. 《剑指offer》第五十九题（滑动窗口的最大值）

    // 面试题59(一):滑动窗口的最大值 // 题目:给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如, // 如果输入数组{2, 3, 4, 2, 6, 2, 5, 1}及滑动窗口的 ...

  9. Codeforces 994 C - Two Squares

    C - Two Squares 思路: 点积叉积应用 代码: #include<bits/stdc++.h> using namespace std; #define fi first # ...

  10. python+selenium2（一）

    一.安装python (1)在官网下载python的安装包,这里使用的是python3.5.安装一路下一步,安装路径我的是D:\Python35. (2)在计算机的path变量中添加D:\Python ...