基于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 () {

  }
})