基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车

效果图

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>黄菊华：Vue.js商城实战-购物车</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/gouwuche.css"><script src="vue2.2.2.min.js" ></script><script src="axios.min.js"></script>
</head><body>
<div id="app">
<!--购物车-顶部导航-->
<div class="dingbu"><a href="index.html" class="dingbu_lianjie"><img src="img/back.png"  alt="" class="dingbu_lianjie_img" /></a><p class="dingbu_biaoti">购物车</p>
</div><div v-for="(cp,index) in cps">    <!--购物车-产品列表--><div class="gwc_cp"><!--购物车-产品列表-单号栏--><div class="dingdan_hao"><div class="dingdan_hao_zuo">时间：{{cp.shijian_gouwuche}}</div><a href="#" class="dingdan_hao_you"><img src="img/del.png" alt="" class="dingdan_hao_you_img" /></a></div><!--购物车-产品区块制作--><div class="gwc_cp_xiangmu"><!--购物车-产品区块制作-左侧-选择项--><div class="gwc_cp_xiangmu_xuanzhhe"><input type="checkbox" class="gwc_cp_xiangmu_xuanzhhe_chk" :value="cp.gwc_id"  name="xuanxiangs" @click="ck(index)" /></div><!--购物车-产品区块制作-中间-图片--><div class="gwc_cp_xiangmu_tupian"><img  v-bind:src="cp.cp_tupian"  class="gwc_cp_xiangmu_tupian_img" /></div><!--购物车-产品区块制作-右侧-产品信息--><div class="gwc_cp_xiangmu_xinxi"><div class="gwc_cp_xiangmu_xinxi_biaoti">{{cp.cp_mingcheng}}</div><div class="gwc_cp_xiangmu_xinxi_shuxing">库存：{{cp.cp_kucu}} |  已销售：{{cp.cp_yixiaoshou}}</div><!--购物车-产品区块制作-右侧-产品信息-价格--><div class="gwc_cp_xiangmu_xinxi_jiage"><div class="gwc_cp_xiangmu_xinxi_jiage_zuo">¥ {{cp.jiage}}</div><div class="gwc_cp_xiangmu_xinxi_jiage_you"><!--减少数量--><img src="img/jian1.png" class="gwc_cp_xiangmu_xinxi_jiage_you1" v-on:click="remove(index,cp.gwc_id)" /><!--产品数量--><input type="text" v-bind:value="cp.cp_shuliang" class="gwc_cp_xiangmu_xinxi_jiage_you2" size="2"  /><!--增加数量--><img src="img/jia1.png" class="gwc_cp_xiangmu_xinxi_jiage_you3" v-on:click="add(index,cp.gwc_id)" /></div></div></div></div></div><div class="huise10"></div>
</div> <!--for--><div class="dibu_jiesuan"><div class="dibu_jiesuan_zuo"><input  type="checkbox" class="dibu_jiesuan_zuo_chk" id="quanxian" name="quanxuan" @click="quanxuan()" /><label for="quanxian">全选</label></div><div class="dibu_jiesuan_zhong">合计：¥ {{zongfeiyong}}</div><a  class="dibu_jiesuan_you" @click="jiesuan()" style="cursor: pointer;">去结算</a>
</div></div> <!--app--><script>new Vue({el: '#app',data: {cps:[],zongfeiyong:0,cpids:""},//页面初始化要执行的mounted:function(){this.GetCps();},//自定义的函数（方法）methods:{//加载购物车产品列表GetCps:function(){axios.get('http://vue.yaoyiwangluo.com/wx_gwc_list.asp',{params:{uid:localStorage.u_id}}                ).then(function (response) {//response.data 返回值,下面插入你要执行的代码console.log(response.data);this.cps = response.data;}.bind(this)).catch(function (error) {console.log(error);});         },//增加数量add:function(index,gwc_id){console.log("购物车id:"+gwc_id+" | index:"+ index);var shumu = ++this.cps[index].cp_shuliang;var obcNameList = document.getElementsByName("xuanxiangs");if(obcNameList[index].checked==true){this.zongfeiyong = this.zongfeiyong + Number(this.cps[index].jiage)}        console.log("数目："+shumu)axios.get('http://vue.yaoyiwangluo.com/wx_gwc_shuxiugai.asp',{params:{cs_user_id:localStorage.u_id,   cs_gwc_id:gwc_id,cs_cp_shu:shumu}}                 ).then(function (response) {//response.data 返回值,下面插入你要执行的代码}.bind(this)).catch(function (error) {console.log(error);});                  },//减少数量remove:function(index,gwc_id){if(Number(this.cps[index].cp_shuliang)<=1){alert("产品数量不能少于1");}else{var shumu = --this.cps[index].cp_shuliang;var obcNameList = document.getElementsByName("xuanxiangs");if(obcNameList[index].checked==true){this.zongfeiyong = this.zongfeiyong - Number(this.cps[index].jiage)}axios.get('http://vue.yaoyiwangluo.com/wx_gwc_shuxiugai.asp',{params:{cs_user_id:localStorage.u_id,   cs_gwc_id:gwc_id,cs_cp_shu:shumu}}                ).then(function (response) {//response.data 返回值,下面插入你要执行的代码}.bind(this)).catch(function (error) {console.log(error);});                      }},//单选计费ck:function(index){var obcNameList = document.getElementsByName("xuanxiangs");if(obcNameList[index].checked==true){this.zongfeiyong = this.zongfeiyong + this.cps[index].jiage*this.cps[index].cp_shuliang;}else{this.zongfeiyong = this.zongfeiyong - this.cps[index].jiage*this.cps[index].cp_shuliang;}},//全选和取消全选quanxuan:function(){this.zongfeiyong = 0;var obcNameList = document.getElementsByName("xuanxiangs");if(document.getElementById("quanxian").checked==true){for(var i=0;i<obcNameList.length;i++){obcNameList[i].checked=true;this.zongfeiyong=this.zongfeiyong+this.cps[i].jiage*this.cps[i].cp_shuliang}}else{this.zongfeiyong = 0;for(var i=0;i<obcNameList.length;i++){obcNameList[i].checked=false;}}},//去结算功能jiesuan:function(){this.cpids ="";var obcNameList = document.getElementsByName("xuanxiangs");for(var i=0;i<obcNameList.length;i++){if(obcNameList[i].checked==true){this.cpids = this.cpids + this.cps[i].gwc_id+",";}  }      if(this.cpids==""){alert("请选择产品");}else{console.log("选择的产品ids:"+this.cpids);window.location = "gouwuche_xiadan.html?cpids=" + this.cpids;}},},        })
</script></body>
</html>

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车相关推荐

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（1）首页
效果图代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情
效果图代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
基于SSM的创意商城动态网站【毕设-附源码】
基于SSM的创意商城动态网站目录 1 引言 1 1.1 课题背景 1 1.2 目的和意义 1 1.3系统开发技术的特色 1 1.4 论文结构安排 2 2 创意商城的需求分析 3 2.1 系统可行性 ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
基于Node.js自我展示博客网站-计算机毕设附源码231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
基于SSM在线服装商城购物网站设计
开发技术: SSM 开发软件:Eclipse或Idea + Mysql 近几年由于兴起了一站式男装线上出售潮流,面向该经济市场的需求开发一套专属男性的服装购物系统指日可待.在这个系统中,用户可以挑选到 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
vue.js毕业设计，基于vue.js前后端分离图书购物商城小程序系统设计与实现
功能介绍 [后台管理员功能] 会员列表:查看所有注册会员信息,支持删除录入资讯:录入资讯标题.内容等信息管理资讯:查看已录入资讯列表,支持删除和修改广告设置:上传图片和设置小程序首页轮播图广告地 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
（附源码）Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车

效果图

代码

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车相关推荐

最新文章

热门文章

基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车

效果图

代码

基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车相关推荐

最新文章

热门文章

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（6）购物车相关推荐