微信小程序简单实现购物车功能（三）-灵析社区

订单确认页面，用户信息填写操作

使用微信小程序的表单组件实现，input、textarea组件都需要bindinput属性绑定事件函数，
当键盘输入时，触发 input 事件，得到输入的内容event.detail.value，并改变data中相应的值。

表单的验证处理，主要判断输入框是否为空值，如果为空值，使用微信自带的提示框APIwx.showToast，提示内容不能为空；像电话这样的内容还需要判断输入的号码格式是否正确，使用正则表达式进行判断。并且可以把所有需要判断的输入值，写到一个函数中，每个输入值进行判断，如果不符合条件就返回单独false，最后如果都符合了，就返回true。最后提交表单数据的时候，调用该函数进行判断。

注：如果该页面会有修改的操作，那么之前填写的信息，会在进行修改的时候默认显示，那么需要把输入框的默认值value定义为之前提交数据的相应值；同时data中的相应值也需要在请求到数据（之前提交的表单数据）重新赋值，避免不修改某输入框的内容，提交的表单数据为空。

<input class="weui-input chose-date" type="number" placeholder="请输入电话" value="{{orderData.phone}}" bindinput="bindTelInput" />

checkForm() {
    let mPattern = /^1[3456789]\d{9}$/;
    if (!this.data.tel) {
      wx.showToast({
        icon: 'none',
        title: '请输入电话！',
      })
      return false;
    } else if (!mPattern.test(this.data.tel)) {
      wx.showToast({
        icon: 'none',
        title: '电话格式错误',
      })
      return false;
    }
    return true;
  },

订单支付页面，实现微信支付

调用后台的接口，将购物车的信息及填写的表单内容，传递给后台，请求成功之后，得到返回的走微信支付需要的相关参数，具体参数说明如下图：

调用微信支付APIwx.requestPayment发起微信支付，在调用成功的success回调函数中，跳转到支付成功的页面。

注：此项目中如果座位的总金额为0，就不需要走微信支付，因此后台不返回支付签名等参数，前端根据来判断不走微信支付

toPlay() {
    if (!this.data.ischose) {
      wx.showToast({
        icon: 'none',
        title: '请勾选协议！',
      })
      return false;
    }

    let data = this.data.data
    $api.scheduledSeat(data)
      .then(
        res => {
          let order_no = res.data.order_no
          if (res.data.paySign) {
            wx.requestPayment({
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success(res) {
                console.log(res)
                if (res.errMsg === 'requestPayment:ok') {
                  wx.navigateTo({
                    url: '/pages/palysuccess/palysuccess?order=' + order_no,
                  })
                }
              },
              fail(err) {
                console.error('pay fail', err)
              }
            })
          } else {
            wx.navigateTo({
              url: '/pages/palysuccess/palysuccess?order=' + order_no,
            })
          }
        }
      )
      .catch(err => {
        if (err.code == 202) {
          wx.showToast({
            icon: 'none',
            title: err.msg
          })
        }
      })
  },

这样，购物车的功能基本就完成了