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

妖狐艹你老母 2022-11-12 08:18 153阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

## 代码 ##

<!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> 
    	
     
    	
    
    <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> 
    
    
    <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: /images/20221022/e76ae999bd444543a34ede4f6edb7847.png