<!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. Python学习笔记3-string

    More on Modules and their Namespaces Suppose you've got a module "binky.py" which contains ...

  2. 在ETH交易区块链里查看北大的那封信

    本文仅限于科普编码知识使用,随便举的例子不代表本人立场. 欢迎在其他网站传播,但转载不得标注来源及作者. 1.随便打开一个ETH区块链浏览网站,比如:https://www.etherchain.or ...

  3. vue--vuex

    https://vuex.vuejs.org/ vuex是专为 vue.js 应用程序开发的 状态管理模式 采用集中式存储管理应用的所有组件状态 并以相应的规则保证状态以一种可预测的方式发生变化 vu ...

  4. Vue运行报错--eslint

    Errors:? 1? http://eslint.org/docs/rules/no-trailing-spacesYou may use special comments to disable s ...

  5. _spellmod_leech_spell

    comment  备注 spell 技能ID,玩家释放该技能时附带吸血效果 meetAura  产生吸血效果需要满足的光环ID,比如做一个空的光环,为寒冰箭吸血光环,则有些光环时候,寒冰箭会附带吸血效 ...

  6. C#端加载数据库，Combobox与Node控件绑定数据源demo示例

    最近一直在做网页.用的js比较多,最近需要做一个C#相关的demo,一开始还有点不适应,写了几句有点感觉了 本篇博客的主要内容是C#怎么读取数据库文件里的数据以及相关控件如何绑定数据源,所做的Demo ...

  7. synchronized中判断条件用while而不是if

    假设一个生产者生产一个产品,两个消费者A,B去取这个商品. 使用if: A去取商品,发现空,于是等待... B去取商品,发现空,于是等待... 生产者生产商品,唤醒他们 B先争到锁,从wait()后执 ...

  8. leecode第七十八题（子集）

    class Solution { public: vector<vector<int>> subsets(vector<int>& nums) { vect ...

  9. 认识flask框架-2

    1.json:基于键值对的字符串,轻量级的数据交互格式,用来传输数据 2.json模块 dumps:把字典转化成json字符串. loads:把json字符串转成字典. dump.load操作的是文件 ...

  10. js,java时间处理

    1.JS获取时间格式为“yyyy-MM-dd HH:mm:ss”的字符串 function getTimeStr(){ var myDate = new Date(); var year = myDa ...