基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车
生活随笔
收集整理的這篇文章主要介紹了
基于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）购物车的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深度学习之 soft-NMS
- 下一篇： 水经注SOSO电子地图下载器官方下载V1