H5支付——微信支付 支付宝支付

开始先了解文档,主要参考微信授权和beecloud两个

1.参考文档

1-1.网页授权

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1-2.beecloud支付(接口说明)

https://www.beecloud.cn/doc/?sdk=java#2-3-1

支付流程

2.微信授权流程

2-1.引入配置的script标签(构建支付参数发起支付的script标签)

引入至public文件下的html文件中(放在head标签内)

2-2.检查是否有微信授权——没有授权申请授权,有授权进入指定页面

2-2-1先判断是是否是浏览器打开的
2-2-2如果是微信浏览器打开的需要判断是否授权过
2-2-3如果没有授权过，跳转授权页
ps：将所有的判断放在路由守卫里面    在入口文件main.js中判断即可

2-3.code页面和auth页面(页面需要在路由里面注册,图三)

code页面功能: 配置网页授权参数并跳转页面实现授权功能
auth页面功能: 用户授权之后通过jscode获取openid
ps:code页面的wxCode可独立为一个单独的js文件,引入至该页面,看起来更简洁

3.支付

      this.$http
        .post('/member/member/dopay', {
          money: this.money == 0 ? this.indexMoney : this.money,
          payment: this.payType
        })
        .then(res => {
          if (res.code == 1) {
            this.theBeecloud(res.data)   //吊起支付
          }
        })
    },
    // https://www.beecloud.cn/doc/?sdk=java#2-3-1
    theBeecloud(data) {   //支付方法
      let self = this
      // alert(getCookie('openId'))
      if (getCookie('openId')) {   //这是公众号支付    有openid
        // eslint-disable-next-line no-undef
        BC.click(
          {
            title: data.title,   //	支付订单的标题
            out_trade_no: data.out_trade_no, //支付订单的编号
            analysis: data.analysis,//自定义参数
            return_url: 'https://app.igxzz.cn', //支付成功后跳转地址
            amount: data.amount,  //订单总价
            sign: data.sign,//签名
            instant_channel: this.payType,//支付渠道
            openid: getCookie('openId')  // openid
          },
          {
            dataError: function() {
              self.$toast('支付失败')
              self.failJump()
            },
            wxJsapiFail: function() {
              self.$toast('支付失败')
              self.failJump()
            },
            wxJsapiSuccess: function(res) {
              console.log(res)

              // jsapi接口调用完成后
              self.failJump()
              self.$toast('支付成功')
            }
          }
        )
      } else {  //这是网页支付   无openid
        // eslint-disable-next-line no-undef
        BC.click(
          {
            title: data.title,
            out_trade_no: data.out_trade_no, //订单号
            analysis: data.analysis,
            return_url: 'https://app.igxzz.cn',
            amount: data.amount,
            sign: data.sign,
            instant_channel: this.payType
          },
          {
            dataError: function() {
              self.$toast('支付失败')
              self.failJump()
            },
            wxJsapiFail: function() {
              self.$toast('支付失败')
              self.failJump()
            },
            wxJsapiSuccess: function(res) {
              // jsapi接口调用完成后
              console.log(res)

              self.failJump()
              self.$toast('支付成功')
            }
          }
        )
      }
    },
    failJump(){
        this.$router.push({
        name: 'mine'
      })
    },