程序博客网 > 淘宝点了收藏没反应

VUE购物车

来源：互联网 发布：淘宝点了收藏没反应 编辑：程序博客网 时间：2024/05/16 12:27
bootstrap+vue,js(vue-resource)完成购物车。实现了商品的选择，删除，全选（取消全选）。
以及商品的价格双向绑定和总价的实时计算。
巩固ajax获取模拟后台的json数据，并对数据进行操作处理。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>宋先森的购物车</title>

<!-- Bootstrap -->
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style type="text/css">
/** {
border: 1px solid darkgray;
}*/
/*模块之间 分层70px*/
.projectname,
.noticelist {
margin-bottom: 70px;
}
/*商品列表 和 结账 上边距*/
.noticelist,
.settle {
border-top: 2px solid crimson;
}
.notice {
border: 2px solid #FFF;
}
/*鼠标经过图片触发*/
.notice:hover {
border: 2px solid lightcoral;
}
/*商品数量设置*/
.inputNum {
display: inline-block;
width: 50px;
}
/*商品列表图片高贺和宽*/
.noticemin {
width: 80px;
height: 60px;
}
/*单价字体颜色*/
.zong_price {
color: lightcoral;
}
/*结账 的字体大小*/
.accounts {
font-size: 2.3em;
}
/*全选（取消全选）的字体大小*/
.btnchoose {
font-size: 1.5em;
}
/*结账模块的外边距底部*/
.settle {
margin-bottom: 70px;
}
/*结账按钮外边距*/
.btnaccounts {
margin-bottom: 1em;
}
</style>
</head>

<body>

<div id="notice_index" class="container">
<div class="row clearfix projectname">
<!--项目名字-->
<div class="col-md-12 column">
<h1 class="text-center">
                bootstrap+vue.js 购物车项目
            </h1>
</div>
</div>
<!--商品图片表-->
<div class="row clearfix noticelist">
<!--选择商品-->
<div class="col-md-12 column">
<h4 class="text-left">
                单击选择您要购买的商品：
            </h4>
</div>

<div class="col-md-4 column text-center" v-for="itemImg in noticeList">
<img :alt="itemImg.name" v-bind:src="itemImg.img" v-on:click="selectnotice(itemImg,1)" class="img-rounded notice" />
</div>
</div>
<!--商品列表-->
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>
编号
</th>
<th>
商品信息
</th>
<th>
商品单价
</th>
<th>
商品数量
</th>
<th>
总金额
</th>
<th>
删除
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in noticeList" v-if="item.checked">
<td>
{{index+1}}
</td>
<td>
<span>
                            <img alt="item.name" v-bind:src="item.img" class="img-rounded noticemin"/>
                        </span>
<span>
                            <strong>{{item.name}}</strong>
                            <p>赠品：</p>{{item.gift}}
                        </span>
</td>
<td>
{{item.danprice|formatMoney}}
</td>
<td>
<button v-on:click="changeMoney(item,-1)"><strong>-</strong></button>
<input type="text" class="form-control inputNum" disabled="disabled" value="0" v-model="item.number" />
<button v-on:click="changeMoney(item,1)"><strong>+</strong></button>
</td>
<td class="zong_price">
{{item.zongprice=item.danprice*item.number|formatMoney}}
</td>
<td>
<a id="modal-418866" href="#modal-container-418866" role="button" class="btn" data-toggle="modal" v-on:click="delconfirm(item)">删除</a>
</td>
</tr>
</tbody>
</table>
<!--结账模块-->
<div class="row clearfix settle">
<div class="col-sm-6 column">
<a href="#" role="button" class="btn btnchoose" @click="selectall(1)">全选</a>
<a href="#" role="button" class="btn btnchoose" @click="selectall(-1)">取消全选</a>
</div>
<div class="col-sm-6 column text-center">
<span class="accounts">结账：</span>
<button type="button" class="btn btn-danger btn-lg btnaccounts" onclick="alert('小练习不能跳转！')">
                        {{total_price|formatMoney}}
                    </button>
</div>
</div>
</div>
</div>
<!--删除弹出 拟态窗-->
<div class="row clearfix">
<div class="col-md-12 column">
<div class="modal fade" id="modal-container-418866" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
                                您要删除商品吗？
                            </h4>
</div>
<div class="modal-body text-center">
您要删除商品吗？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="selectnotice(delitem,-1)">删除
                            </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--vue.js-->
<script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
<script type="text/javascript">
/**
 * Created by Administrator on 2017/3/28.
 * 购物车首页的vue.js用于数据绑定
 */
new Vue({
el: "#notice_index",
data: {
total_price: 0,
noticeList: [{
"checked": false,
"img": "http://sczgodofwar.top/zuopin/shoppingCart/img/201.png",
"name": "鼠标",
"danprice": 21,
"number": 0,
"zongprice": 0,
"gift": "鼠标垫"
},
{
"checked": false,
"img": "http://sczgodofwar.top/zuopin/shoppingCart/img/202.png",
"name": "键盘",
"danprice": 60,
"number": 0,
"zongprice": 0,
"gift": "鼠标垫，数据线"
},
{
"checked": false,
"img": "http://sczgodofwar.top/zuopin/shoppingCart/img/203.png",
"name": "U盘",
"danprice": 25,
"number": 0,
"zongprice": 0,
"gift": "数据线"
}
],
delitem: ''
},
filters: {
formatMoney: function(value) {
return "￥" + value.toFixed(2);
}
},
mounted: function() {
this.$nextTick(function() {
this.noticedetail();
})
},
methods: {
//获取json文件的 数据
/* noticedetail: function () {
     this.$http.get("json/noticeList.json").then(res => {
         this.noticeList = res.body.noticelist;
     })
 },*/
//商品数量加减函数
changeMoney: function(notice, way) {
if(way > 0) {
notice.number++;
if(notice.number > 99) {
notice.number = 99;
}
} else {
notice.number--;
if(notice.number < 0) {
notice.number = 0;
}
}
this.totalPrice;
},
//商品选择
selectnotice: function(item, way) {
if(way > 0) {
item.checked = true;
} else {
item.checked = false;
}
this.totalPrice;
},
//商品是否要 全选中
selectall: function(way) {
this.noticeList.forEach(item => {
//IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。
if(way > 0) {
item.checked = true;
} else {
item.checked = false;
}
})
this.totalPrice;
},
//删除商品
delconfirm: function(item) {
this.delitem = item;
}
},
computed: {
//结账 总金额的实时计算
totalPrice: function() {
//IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。再加上 _this=this。
this.total_price = 0;
this.noticeList.forEach(item => {
if(item.checked == true) {
this.total_price += item.danprice * item.number;
}
})
}
}
});
</script>
</body>

</html>

可以进群交流的哦~~~WEB前端学习交流群21 598399936
阅读全文
0 0
淘宝点了收藏没反应 淘宝点了收藏没反应
原创粉丝点击
热门IT博客
阿里数据可视化软件阿里数据可视化软件
苍狼软件苍狼软件
Java四舍五入
浏览器设置代理端口
淘宝网大风筝
淘宝排行榜如何设置
阿里云服务器添加域名
人人商城分销源码下载
淘宝卖家采集器
apache和tomcat的整合
java interface 属性
匿名函数js
国内财经新闻 知乎
免费字体软件下载
大众老总途观 知乎
狸窝 mac
英文单词发音软件
网络安全法第27条规定
java 文本按行读取
淘宝禁止出售有毒化学
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 煽情什么意思 离别的话煽情伤感 煽情的话简短10个字 煽情是什么意思解释 煽情的句子关于爱情 煽情到会哭的离别语录 煽情的话 简短一些 感恩公司的煽情话 言情句子煽情短句 煽情话语简短 关于风的句子煽情的 闺蜜短句十个字不煽情 宿主们爱争风吃醋 一味煽情 学霸舍友喜欢我 一味煽情 怒 加油熄火 摩托车熄火 熄火 自动挡熄火 燃气灶熄火 起步熄火 临危熄火 熄火的原因 汽车熄火 车子熄火 轿车两天没熄火 一键启动熄火 熄火哥技术流 自动挡熄火步骤 燃气灶自动熄火解决方法 自动挡车熄火 爬坡起步永不熄火绝招 上坡起步永不熄火办法 主机反复启动熄火 爬坡定点永不熄火绝招 一键启动怎么熄火 坡道起步如何不熄火 一键启动车怎么熄火 一键启动车怎么正确熄火 汽车行驶中突然熄火 天然气灶打着火几秒钟就熄火

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里