基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（6）购物车列表

效果图

wxml代码

<form bindsubmit="mysubmit" > <!--购物车-产品列表--> <checkbox-group bindchange="ck" name="xuanxiang"> <view class="gwccp" wx:for="{{gwc}}" wx:for-item="cp" wx:for-index="xuhao"> <!--购物车-产品列表-单号栏--> <view class="danhao"> <view class="danhao_zuo">时间：{{cp.shijian_gouwuche}}</view> <view class="danhao_you" data-gwcid="{{cp.gwc_id}}" bindtap="mydel"> <image src="/img/del.png" class="danhao_you_img"></image> </view> </view> <!--产品 左中右--> <view class="xiangmu"> <view class="xiangmu_zuo"><!--购物车-产品区块制作-左侧-选择项--> <checkbox class="xiangmu_zuo_check" value="{{cp.gwc_id}}" name="xuanxiangs" checked="{{isChecked}}"></checkbox> </view> <view class="xiangmu_zhong"><!--购物车-产品区块制作-中间-图片--> <image src="{{cp.cp_tupian}}" mode="widthFix" class="xiangmu_zhong_img"></image> </view> <view class="xiangmu_you"><!--购物车-产品区块制作-右侧-产品信息--> <view class="you_biaoti">{{cp.cp_mingcheng}}</view> <view class="you_shuxing">库存：{{cp.cp_kucu}} | 已销：{{cp.cp_yixiaoshou}}</view> <view class="you_jiage"> <view class="you_jiage_zou">¥ {{cp.jiage}}</view> <view class="you_jiage_you"> <image src="/img/jian1.png" mode="widthFix" class="you_jian" data-gwcid="{{cp.gwc_id}}" data-shuliang="{{cp.cp_shuliang}}" data-jiage="{{cp.jiage}}" bindtap="myremove"></image> <input type="text" value="{{cp.cp_shuliang}}" class="you_text" /> <image src="/img/jia1.png" mode="widthFix" class="you_jia" data-gwcid="{{cp.gwc_id}}" data-shuliang="{{cp.cp_shuliang}}" data-jiage="{{cp.jiage}}" bindtap="myadd"></image> </view> </view> </view> </view> <view class="huise10"></view> </view> <view class="huise10"></view> <view class="huise10"></view> <view class="huise10"></view> <view class="huise10"></view> </checkbox-group> <view class="jiesuan"> <view class="jiesuan_zuo"> <checkbox-group bindchange="quanxuan"> <checkbox class="jiesuan_zuo_check" checked="{{allChecked}}">全选</checkbox> </checkbox-group> </view> <view class="jiesuan_zhong"> 合计：¥ {{zongfeiyong}} </view> <button class="jiesuan_you" form-type="submit" size="mini" > 结算 </button> </view> </form>

wxss代码

.gwccp{} .jiesuan{position: fixed; bottom: 0px; background-color: #EBEAEF; height: 35px; display: flex; width: 100%; border-top: 1px solid #C8C7CC; justify-content: center; align-items: center;} .jiesuan_zuo{width: 20%; padding: 3px;} .jiesuan_zuo_check{} .jiesuan_zhong{width: 60%;background-color: #FFFFFF; text-align: center;height: 35px;line-height: 35px;} .jiesuan_you{width: 20%; display: flex;height: 35px; background-color: #DD524D; color: #FFFFFF; justify-content: center; align-items: center; border-radius: 0;} .huise10{height: 10px;background-color: #EBEAEF;} /* 产品-右侧产品信息-价格*/ .you_biaoti{color: #333333; font-size: 14px;} .you_shuxing{font-size: 12px; color: #C0C0C0;} .you_jiage{font-size: 13px; color: #DD524D; display: flex; align-items: center;} .you_jiage_zou{flex-grow: 1;} .you_jiage_you{display: flex; border: 1px solid #C8C7CC; align-items: center;} .you_jian{width: 20px;} .you_text{ width: 30px; text-align: center;border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;} .you_jia{width: 20px;} /*产品 左中右*/ .xiangmu{display: flex;padding: 5px; align-items: center;} .xiangmu_zuo{width: 8%;} .xiangmu_zuo_check{} .xiangmu_zhong{width: 27%;} .xiangmu_zhong_img{width:100%} .xiangmu_you{width: 65%; padding: 5px;} /* 购物车-产品列表-单号栏*/ .danhao{display: flex;padding: 5px; border-bottom: 1px solid #C8C7CC;} .danhao_zuo{flex-grow: 1;} .danhao_you{} .danhao_you_img{width: 19px;height: 19px;}

js代码

//获取应用实例 var app = getApp() // pages/index/test.js Page({ /** * 页面的初始数据 */ data: { user_id:0, gwc:[], cks:[], zongfeiyong:0, winHeight: 0, isChecked:false, checkedArr:[], //复选框选中的值 allChecked:false //是否全选 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this = this //获得用户id wx.getStorage({ key: 'u_id', success:function(res){ console.log("用户id："+res.data) _this.setData({ user_id:res.data }) _this.cz(); } }) }, cz: function(){ var _this = this wx.request({ url: app.myapp.php + "/wx_gwc_list.php", data:{uid:this.data.user_id}, success:function(res){ console.log(res.data) _this.setData({ gwc:res.data }) } }) }, //删除数据 mydel:function(e){ console.log("要删除的购物车id："+e.currentTarget.dataset.gwcid) console.log("操作的用户id："+this.data.user_id) //删除购物车，参数为用户的id和购物车id wx.request({ url: app.myapp.php + "/wx_gwc_del.php", data:{ cs_gwc_id: e.currentTarget.dataset.gwcid, cs_user_id: this.data.user_id }, success: (res) => { this.cz(); } }) }, myadd:function(e){ var _this = this console.log("增加数量") console.log("购物车id："+e.currentTarget.dataset.gwcid) console.log("操作的用户id："+this.data.user_id) console.log("要更新产品数量："+e.currentTarget.dataset.shuliang) console.log(parseInt(e.currentTarget.dataset.shuliang)+1) //注意 console.log("当前选中项目：" + this.data.checkedArr) //console.log("参数："+JSON.stringify(e)) if(e.currentTarget.dataset.shuliang >= 1){ //选中费用处理 if(this.data.checkedArr.includes(e.currentTarget.dataset.gwcid)){ //this.data.zongfeiyong = parseInt(this.data.zongfeiyong) + parseInt(e.currentTarget.dataset.jiage); _this.setData({ zongfeiyong: parseInt(_this.data.zongfeiyong) + parseInt(e.currentTarget.dataset.jiage) }) } //url:this.$WebURL.WebUrl.phpweb + "/wx_gwc_shuxiugai.php", wx.request({ url: app.myapp.php + "/wx_gwc_shuxiugai.php", data:{ cs_cp_shu: parseInt(e.currentTarget.dataset.shuliang)+1, cs_gwc_id: e.currentTarget.dataset.gwcid, cs_user_id: this.data.user_id }, success: () => { this.cz() } }) } }, myremove:function(e){ console.log("购物车id："+e.currentTarget.dataset.gwcid) console.log("操作的用户id："+this.data.user_id) console.log("要更新产品数量："+e.currentTarget.dataset.shuliang) console.log(parseInt(e.currentTarget.dataset.shuliang)+1) //注意 if(e.currentTarget.dataset.shuliang >=2){ //选中费用处理 if(this.data.checkedArr.includes(e.currentTarget.dataset.gwcid)){ this.setData({ zongfeiyong:parseInt(this.data.zongfeiyong) - parseInt(e.currentTarget.dataset.jiage) }) } //url:this.$WebURL.WebUrl.phpweb + "/wx_gwc_shuxiugai.php", wx.request({ url: app.myapp.php + "/wx_gwc_shuxiugai.php", data:{ cs_cp_shu: parseInt(e.currentTarget.dataset.shuliang)-1, cs_gwc_id: e.currentTarget.dataset.gwcid, cs_user_id: this.data.user_id }, success: () => { this.cz() } }) }else{ wx.showToast({ title:"数量不能少于1" }) } }, ck:function(e){ var _this = this console.log(_this.data.gwc) console.log(e.detail) console.log(e.detail.value[0]) //console.log(this.data.gwc[e.detail.value[0]].jiage) this.data.zongfeiyong = 0; this.data.cks = e.detail.value; for(var i=0;i<this.data.gwc.length;i++){ if(this.data.cks.includes(this.data.gwc[i].gwc_id)){ console.log("当前选中产品名称："+this.data.gwc[i].cp_mingcheng) console.log("当前选中产品价格：" + this.data.gwc[i].jiage) _this.data.checkedArr.push(_this.data.gwc[i].gwc_id) _this.setData({ zongfeiyong: parseInt(_this.data.zongfeiyong) + parseInt(_this.data.gwc[i].jiage)*parseInt(_this.data.gwc[i].cp_shuliang) }) } } console.log("_this.data.cks.length："+_this.data.cks.length) console.log("_this.data.gwc.length："+_this.data.gwc.length) if(_this.data.cks.length == _this.data.gwc.length){ _this.setData({ allChecked:true }) }else{ _this.setData({ allChecked:false }) } }, quanxuan:function(e){ var _this = this _this.setData({ zongfeiyong:0 }) //console.log("点击全选") //console.log(e.detail) //console.log(e.detail.value) // 全选 if (e.detail.value.length == 0) { console.log("取消全选") _this.setData({ isChecked:false }) }else{ console.log("全选") _this.setData({ isChecked:true }) for(var i=0;i<this.data.gwc.length;i++){ //this.data.zongfeiyong = parseInt(this.data.zongfeiyong) + parseInt(this.data.gwc[i].jiage)*parseInt(this.gwc[i].cp_shuliang); _this.setData({ zongfeiyong: parseInt(_this.data.zongfeiyong) + parseInt(_this.data.gwc[i].jiage)*parseInt(_this.data.gwc[i].cp_shuliang) }) } } }, mysubmit:function(e){ console.log("发起结算") console.log("结算费用：" + this.data.zongfeiyong) console.log("选中项目：" + e.detail.value.xuanxiang) if(parseInt(this.data.zongfeiyong)<=0){ wx.showToast({ title: '请选择商品', }) }else{ wx.navigateTo({ url: '/pages/huiyuan/gouwuche/che_jiesuan?gwc_zfy='+this.data.zongfeiyong+"&gwc_ids="+ e.detail.value.xuanxiang, }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })