基于php微信小程序购物商城 校园二手商品 图书鲜花商城 毕业设计（7）购物车下单、留言

效果图

wxml代码

<form bindsubmit='xiadan'> <scroll-view scroll-y style='height: {{winHeight -40}}px' class='gwc'> <!--地址列表--> <view class='jiesuan-dizhi'> <view class='jiesuan-dizhi-zuo'> <view class='jiesuan-dizhi-list'> <radio-group name="dizhiid"> <view wx:for="{{dizhis}}"> <radio value='{{item.dizhi_id}}' checked='{{item.yn_moren ==1 ? true :false}}'>{{item.xingming}}-{{item.shouji}}</radio> <text class='jiesuan-dizhi-list-dizhi'>-{{item.diqu1}}{{item.diqu2}}{{item.diqu2}}{{item.dizhi}}</text> </view> </radio-group> </view> <!--新地址--> <view class='jiesuan-dizhi-xin' wx:if="{{xindizhi_xianshi == true}}"> <view class='dizhi'> <view class='dizhi-shouhuo'> <view class='dizhi-shouhuo-ren0'>收货人</view> <view class='dizhi-shouhuo-ren1'> <input type='text' maxlength='10' placeholder='请输入姓名' name="xingming" /> </view> </view> <view class='dizhi-shouhuo'> <view class='dizhi-shouhuo-ren0'>联系电话</view> <view class='dizhi-shouhuo-ren1'> <input type='text' maxlength='10' placeholder='请输入手机号码' name="shouji" /> </view> </view> <view class='dizhi-shouhuo'> <view class='dizhi-shouhuo-ren0'>所在区域</view> <view class='dizhi-shouhuo-ren1'> <picker mode="region" value='{{quyu}}' bindchange='p1' name="diqu"> {{quyu[0]}} {{quyu[1]}} {{quyu[2]}} </picker> </view> </view> <view class='dizhi-xiangxi'> <textarea maxlength='100' placeholder='请输入详细地址' style='height:50px;' name="xiangxi"></textarea> </view> <view class='dizhi-baocun'> <button type='primary' form-type='submit' id='dizhitijiao' data-caozuo='dizhitijiao' style='width:90%;'>保存新地址并设为默认</button> </view> </view> </view> </view> <view class='jiesuan-dizhi-you'> <button size='mini' class='jiesuan-xin-anniu' bindtap='xindizhi'>新</button> </view> </view> <!--购物车产品列表--> <block wx:for="{{gwc}}" wx:key="*this"> <view class='sp'> <view class='sp-tupian'> <image class='sp-img' src='{{item.cp_tupian}}' mode="widthFix"></image> </view> <view class='sp-info'> <view class="sp-mc">{{item.cp_mingcheng}}</view> <view class="sp-xiaoshou">月售：{{item.cp_yixiaoshou}} 件 / 库存：{{item.cp_kucu}}件</view> <view class="sp-jiage">￥：{{item.jiage}}</view> </view> <view class="sp-shuliang"> <view class="sp-shu">{{item.cp_shuliang}}件</view> </view> </view> </block> <view class='jiesuan-liuyan'> 留言 <input type='text' class='jiesuan-liuya-neirong' name="liuyan" /> </view> </scroll-view> <view class='dibu'> <view class='feiyong' style='width:60%;'> <view class='feiyong-tupian'> <image class='feiyong-img' src='/img/sp02.png'></image> </view> <view class='feiyong-shu'>￥：{{zongfeiyong}}</view> </view> <button class='caozuo' style='width:40%' form-type='submit' id='xiadan' data-caozuo='xiadan'>下单结算</button> </view> </form>

wxss代码

/*地址*/ .jiesuan-dizhi{ border-bottom: 1px solid gainsboro; display: flex; align-items: center; } .jiesuan-dizhi-zuo{ display: flex; flex-direction: column; width: 80%; } .jiesuan-dizhi-list{} .jiesuan-dizhi-list-dizhi{ font-size: 12px; color: gray; } .jiesuan-dizhi-you{ width: 20%; display: flex; justify-content: center; align-items: center; } .jiesuan-xin-anniu{ background: darkgreen; color: white; } /*新地址*/ .dizhi{ padding: 5px; } .dizhi-shouhuo{ display: flex; border-bottom: 1px dotted gainsboro; padding: 5px 0; } .dizhi-shouhuo-ren0{ width: 5em; } .dizhi-shouhuo-ren1{} .dizhi-xiangxi{ padding: 5px 0; border-bottom: 1px dotted gainsboro; } .dizhi-moren{ border-bottom: 1px dotted gainsboro; padding: 5px 0; padding-bottom: 15px; } .dizhi-moren switch{ float: right; } .dizhi-baocun{ padding: 1px; } /*购物车产品列表*/ .gwc { display: flex; flex-direction: column; } .sp { display: flex; padding: 5px; border-bottom: 1px dotted gainsboro; } .sp-tupian { width: 20%; } .sp-img { width: 100%; border: 2px solid #f2f2f2; border-radius: 5px; box-shadow: 1px 2px 2px gainsboro; } .sp-info { width: 60%; padding-left: 7px; display: flex; flex-direction: column; } .sp-mc { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sp-xiaoshou { font-size: 12px; color: gray; padding: 3px 0; } .sp-jiage { font-size: 13px; color: red; } .sp-shuliang { width: 20%; display: flex; align-items: center; justify-content: center; } .sp-shu { display: flex; align-items: center; justify-content: center; } .jiesuan-liuyan{ display: flex; padding: 3px; border-bottom: 1px solid gainsboro; } .jiesuan-liuya-neirong{ border: 1px solid gainsboro; flex: 1; } /*底部菜单*/ .dibu { position: absolute; bottom: 0; background-color: #f2f2f2; display: flex; width: 100%; align-items: center; justify-content: center; height: 40px; } .feiyong { display: flex; position: relative; align-items: center; justify-content: center; } .feiyong-tupian { position: absolute; top: -30px; left: 10px; background-color: antiquewhite; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px dotted gainsboro; } .feiyong-img { width: 30px; height: 30px; } .feiyong-shu { color: red; } .caozuo { background-color: orangered; border-radius: 0; color: white; height: 40px; text-align: center; line-height: 40px; }

js代码

//获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { winHeight: 0, user_id: "", gwc: [], zongfeiyong: 0, dizhis:[], xindizhi_xianshi: false, quyu: ["浙江省", "杭州市", "西湖区"], cs_gwcids:"", //2020-05-21 新增 cs_gwcfeiyong:0 //2020-05-21 新增 }, //选择省市区 p1: function (e) { //console.log(e.detail.value) var that = this this.setData({ quyu: e.detail.value }) }, //下单结算 xiadan:function(e){ var that = this //console.log(e.detail) if(e.detail.target.id=="xiadan"){ console.log("下单处理") console.log(e.detail.value) console.log("用户id:" + this.data.user_id) //先判断是否选择地址 if(e.detail.value.dizhiid=="" ){ console.log("请先填写地址") wx.showToast({ title: '请选择或者填写新地址', }) }else{ console.log("下单购物车ids："+that.data.cs_gwcids) console.log("下单购物车费用："+that.data.cs_gwcfeiyong) wx.request({ //url: app.myapp.php + '/wx_gwc_xiadan.php', //php版 url: app.myapp.php + '/wx_gwc_xiadan_by_cs.php', //php版 2020-05-21更新 data:{ cs_uid :that.data.user_id, cs_dizhiid:e.detail.value.dizhiid, cs_liuyan:e.detail.value.liuyan, cs_gwcids:that.data.cs_gwcids, //php版 2020-05-21更新 cs_gwcfeiyong:that.data.cs_gwcfeiyong //php版 2020-05-21更新 }, success:function(){ wx.reLaunch({ url: '/pages/huiyuan/dingdan/dingdan_list', }) }, }) } }else{ console.log("保存地址处理") console.log(e.detail.value) console.log("收货人" + e.detail.value.xingming) console.log("手机" + e.detail.value.shouji) console.log("区域" + e.detail.value.diqu[0] + e.detail.value.diqu[1] + e.detail.value.diqu[2]) console.log("用户id:" + this.data.user_id) wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_dizhi_add.asp',//样本 //url: app.myapp.asp + '/wx_dizhi_add.asp',//asp版 url: app.myapp.php + '/wx_dizhi_add.php',//php版 //url: app.myapp.jsp + '/wx_dizhi_add.jsp',//jsp版 data: { cs_uid: this.data.user_id, cs_xingming: e.detail.value.xingming, cs_shouji: e.detail.value.shouji, cs_diqu1: e.detail.value.diqu[0], cs_diqu2: e.detail.value.diqu[1], cs_diqu3: e.detail.value.diqu[2], cs_dizhi: e.detail.value.xiangxi, cs_moren: true }, success: function (res) { console.log(res.data) that.setData({ xindizhi_xianshi:false}) that.cz() }, }) } }, cz:function(){ var that = this //获取地址列表 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_dizhi_list.asp', //样本 //url: app.myapp.asp + '/wx_dizhi_list.asp', //asp版 url: app.myapp.php + '/wx_dizhi_list.php', //php版 //url: app.myapp.jsp + '/wx_dizhi_list.jsp', //jsp版 data: { cs_uid: that.data.user_id }, success: function (res3) { that.setData({ dizhis: res3.data }) } }) }, xindizhi:function(){ var that=this if (that.data.xindizhi_xianshi==false) { that.setData({ xindizhi_xianshi:true}) }else{ that.setData({ xindizhi_xianshi: false }) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("选中产品总费用："+options.gwc_zfy) console.log("选中的购物车ids："+options.gwc_ids) var that = this that.setData({ zongfeiyong: options.gwc_zfy, cs_gwcids:options.gwc_ids, cs_gwcfeiyong:options.gwc_zfy }) //获取系统信息，手机的屏幕高度 wx.getSystemInfo({ success: function (res) { that.setData({ winHeight: res.windowHeight }) }, }) //获取用户id和远程数据 wx.getStorage({ key: 'u_id', success: function (res) { console.log(res.data) that.setData({ user_id: res.data }) //获取远程数据 wx.request({ //url: app.myapp.php + '/wx_gwc_list.php', //php版 url: app.myapp.php + '/wx_gwc_list_by_gwcids.php', //php版 2020-05-21更新 data: { uid: res.data, gwc_ids:options.gwc_ids //php版 2020-05-21更新 }, success: function (res2) { that.setData({ gwc: res2.data }) } }) //获取购物车费用 /* wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_gwc_feiyong.asp', //样本 //url: app.myapp.asp + '/wx_gwc_feiyong.asp',//asp版 url: app.myapp.php + '/wx_gwc_feiyong.php',//php版 //url: app.myapp.jsp + '/wx_gwc_feiyong.jsp',//jsp版 data: { uid: res.data }, success: function (res2) { } }) */ //获取地址列表 wx.request({ //url: 'http://www.yaoyiwangluo.com/wx_dizhi_list.asp', //样本 //url: app.myapp.asp + '/wx_dizhi_list.asp',//asp版 url: app.myapp.php + '/wx_dizhi_list.php',//php版 //url: app.myapp.jsp + '/wx_dizhi_list.jsp',//jsp版 data: { cs_uid: res.data }, success: function (res3) { that.setData({ dizhis: res3.data }) } }) }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })