基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车
生活随笔
收集整理的這篇文章主要介紹了
基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖
代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>黃菊華：Vue.js商城實(shí)戰(zhàn)-購(gòu)物車(chē)</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"> <!--購(gòu)物車(chē)-頂部導(dǎo)航--> <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">購(gòu)物車(chē)</p> </div><div v-for="(cp,index) in cps"> <!--購(gòu)物車(chē)-產(chǎn)品列表--><div class="gwc_cp"><!--購(gòu)物車(chē)-產(chǎn)品列表-單號(hào)欄--><div class="dingdan_hao"><div class="dingdan_hao_zuo">時(shí)間：{{cp.shijian_gouwuche}}</div><a href="#" class="dingdan_hao_you"><img src="img/del.png" alt="" class="dingdan_hao_you_img" /></a></div><!--購(gòu)物車(chē)-產(chǎn)品區(qū)塊制作--><div class="gwc_cp_xiangmu"><!--購(gòu)物車(chē)-產(chǎn)品區(qū)塊制作-左側(cè)-選擇項(xiàng)--><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><!--購(gòu)物車(chē)-產(chǎn)品區(qū)塊制作-中間-圖片--><div class="gwc_cp_xiangmu_tupian"><img v-bind:src="cp.cp_tupian" class="gwc_cp_xiangmu_tupian_img" /></div><!--購(gòu)物車(chē)-產(chǎn)品區(qū)塊制作-右側(cè)-產(chǎn)品信息--><div class="gwc_cp_xiangmu_xinxi"><div class="gwc_cp_xiangmu_xinxi_biaoti">{{cp.cp_mingcheng}}</div><div class="gwc_cp_xiangmu_xinxi_shuxing">庫(kù)存：{{cp.cp_kucu}} | 已銷(xiāo)售：{{cp.cp_yixiaoshou}}</div><!--購(gòu)物車(chē)-產(chǎn)品區(qū)塊制作-右側(cè)-產(chǎn)品信息-價(jià)格--><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"><!--減少數(shù)量--><img src="img/jian1.png" class="gwc_cp_xiangmu_xinxi_jiage_you1" v-on:click="remove(index,cp.gwc_id)" /><!--產(chǎn)品數(shù)量--><input type="text" v-bind:value="cp.cp_shuliang" class="gwc_cp_xiangmu_xinxi_jiage_you2" size="2" /><!--增加數(shù)量--><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">合計(jì)：￥ {{zongfeiyong}}</div><a class="dibu_jiesuan_you" @click="jiesuan()" style="cursor: pointer;">去結(jié)算</a> </div></div> <!--app--><script>new Vue({el: '#app',data: {cps:[],zongfeiyong:0,cpids:""},//頁(yè)面初始化要執(zhí)行的mounted:function(){this.GetCps();},//自定義的函數(shù)（方法）methods:{//加載購(gòu)物車(chē)產(chǎn)品列表GetCps:function(){axios.get('http://vue.yaoyiwangluo.com/wx_gwc_list.asp',{params:{uid:localStorage.u_id}} ).then(function (response) {//response.data 返回值,下面插入你要執(zhí)行的代碼console.log(response.data);this.cps = response.data;}.bind(this)).catch(function (error) {console.log(error);}); },//增加數(shù)量add:function(index,gwc_id){console.log("購(gòu)物車(chē)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("數(shù)目："+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 返回值,下面插入你要執(zhí)行的代碼}.bind(this)).catch(function (error) {console.log(error);}); },//減少數(shù)量remove:function(index,gwc_id){if(Number(this.cps[index].cp_shuliang)<=1){alert("產(chǎn)品數(shù)量不能少于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 返回值,下面插入你要執(zhí)行的代碼}.bind(this)).catch(function (error) {console.log(error);}); }},//單選計(jì)費(fèi)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;}}},//去結(jié)算功能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("請(qǐng)選擇產(chǎn)品");}else{console.log("選擇的產(chǎn)品ids:"+this.cpids);window.location = "gouwuche_xiadan.html?cpids=" + this.cpids;}},}, }) </script></body> </html>總結(jié)
以上是生活随笔為你收集整理的基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（6）购物车的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 深度学习之 soft-NMS
- 下一篇： modal vue 关闭_Vue弹出框的