web前端支付功能

概述<template> <div> <mt-header fixed title="支付订单"> <mt-button icon="back" slot="left" onclick="history.go(-1)"></mt-button> </mt-header> <div class="page"> <div class="ico

<template>  <div>    <mt-header fixed title="支付订单">      <mt-button icon="back" slot="left" onclick="history.go(-1)"></mt-button>    </mt-header>    <div >      <div >        <img src="./imgs/money.png"  >        <div >等待付款</div>      </div>      <div >订单已提交，请在点击确认支付。</div>      <div >订单金额：¥ {{weixinPayMsg.orderPrice}}</div>      <div ></div>      <div >选择支付方式</div>      <div  v-if="this.payEnv != ‘weixin‘">        <div >          <img src="./imgs/icon-zhifubao.png"  >          <div>支付宝支付</div>        </div>        <img src="./imgs/iconxh_gy_elect.png"  v-if="payType==1" >        <img src="./imgs/iconxh_gy_nomal.png"  v-else  @click="payChoice(1)">      </div>      <div  v-if="this.payEnv != ‘alipay‘">        <div >          <img src="./imgs/icon-weixin.png"  >          <div>微信支付</div>        </div>        <img src="./imgs/iconxh_gy_elect.png"  v-if="payType==2" >        <img src="./imgs/iconxh_gy_nomal.png"  v-else  @click="payChoice(2)">      </div>      <div  : @click="goPays">确认支付</div>    </div>  </div></template><script>import { Toast } from ‘mint-ui‘;import AJAX from ‘@/utils/AJAX‘;// import doctorAJAX from ‘@/utils/doctorAJAX‘;import { getqueryString } from ‘@/utils/index‘;import wxJs from ‘@/utils/wxJsInterface‘;export default {  data: function () {    return {      spbill_create_ip: ‘‘,// ip      bgcolor: true,payType: 1,// 1:支付宝支付,2:微信支付      payEnv: ‘others‘,// 判断微信还是支付宝或者其他浏览器      wxopenID: ‘‘,// 支付订单信息      weixinPayMsg: {        orderID: ‘‘,// 订单号        orderPrice: ‘‘,// 付款金额        category: ‘‘,// 商品：product 处方：prescription,脉诊仪:jinmu        Storename: ‘‘,// 药店名称 已兼容旧版本      },};  },methods: {    // 判断微信还是支付宝或者其他浏览器    liulanqi() {      if (/MicroMessenger/.test(window.navigator.userAgent)) {      // 微信        this.payEnv = ‘weixin‘;        this.payType = 2;      } else if (/AlipayClIEnt/.test(window.navigator.userAgent)) {      // 支付宝        this.payEnv = ‘alipay‘;        this.payType = 1;      } else {      // 其他浏览器        this.payEnv = ‘others‘;        this.payType = 1;      }      console.log(‘浏览器this.payEnv‘,this.payEnv);    },// 选择支付    payChoice(val) {      this.payType = val;    },// 确认支付    goPays() {      console.log(‘确认支付‘);      if (this.bgcolor === false) {        return false;      }      this.bgcolor = false;      if (this.payEnv === ‘weixin‘) { // 在微信内浏览器打开        if (!this.wxopenID && !sessionStorage.getItem(‘wxopenID‘)) {          Toast({            message: ‘账户登录中,请重试！‘,position: ‘mIDdle‘,duration: 2000          });          this.bgcolor = true;          return false;        } else if (sessionStorage.getItem(‘wxopenID‘)) {          this.wxopenID = sessionStorage.getItem(‘wxopenID‘);        }        let data = {          PayType: 2,// 支付类型          OrderID: this.weixinPayMsg.orderID,// 订单号          PayFee: this.weixinPayMsg.orderPrice,// 付款金额          OpenID: this.wxopenID,// 公众号、小程序必传oo8No013EgwlLLMCt_G4bGwhbXjo          category: this.weixinPayMsg.category,脉诊仪:jinmu          Storename: this.weixinPayMsg.Storename,// 药店名称 已兼容旧版本        };        // 在微信内置浏览器中直接调用微信内支付        console.log(‘微信内支付参数‘,data);        AJAX.post(‘/API/pay/wxpay‘,data).then(res => {          console.log(‘微信内提交支付返回结果‘,res);          if (res.status === 200 && res.data.code === 0) {            this.weixinPay(res.data.data);          }        });      } else if (this.payEnv === ‘alipay‘) { // 在支付宝内浏览器打开        console.log(‘唤起支付宝h5支付‘);        let data = {          payType: 6,// 付款金额          category: this.weixinPayMsg.category,// 药店名称 已兼容旧版本          // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderID=` + this.weixinPayMsg.orderID,// 退出跳回地址          quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`,// 退出跳回地址        };        this.alipay(data);      } else if (this.payEnv === ‘others‘) { // 在其他浏览器打开        if (this.payType === 1) { // 普通浏览器进行支付宝h5支付          console.log(‘唤起支付宝h5支付‘);          let data = {            payType: 6,// 支付类型            OrderID: this.weixinPayMsg.orderID,// 订单号            PayFee: this.weixinPayMsg.orderPrice,// 付款金额            category: this.weixinPayMsg.category,脉诊仪:jinmu            Storename: this.weixinPayMsg.Storename,// 药店名称 已兼容旧版本            // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderID=` + this.weixinPayMsg.orderID,// 退出跳回地址            quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`,// 退出跳回地址          };          this.alipay(data);        } else if (this.payType === 2) { // 普通浏览器进行微信h5支付          console.log(‘唤起微信h5支付‘);          let data = {            PayType: 6,// 付款金额            spbill_create_ip: this.spbill_create_ip,OpenID: ‘‘,// 公众号、小程序必传            category: this.weixinPayMsg.category,// 药店名称 已兼容旧版本          };          this.wxpay(data);        }      }    },// 支付宝h5支付    alipay(data) {      console.log(‘支付宝h5支付参数‘,data);      AJAX.post(‘/API/pay/AliPayNew‘,data).then(res => {        console.log(‘支付宝h5支付返回结果‘,res);        this.bgcolor = true;        if (res.status === 200 && res.data.code === 0) {          const form = res.data.data;          const div = document.createElement(‘div‘);          div.ID = ‘alipay‘;          div.INNERHTML = form;          document.body.appendChild(div);          document.querySelector(‘#alipay‘).children[0].submit(); // 执行后会唤起支付宝        }      });    },// 微信h5支付    wxpay(data) {      // let that = this;      console.log(‘微信h5支付参数‘,data);      AJAX.post(‘/API/pay/wxpay‘,data).then(res => {        console.log(‘微信h5提交支付返回结果‘,res);        this.bgcolor = true;        if (res.status === 200 && res.data.code === 0) {          // location.href = res.data.data.mweb_url + ‘&redirect_url=‘ + encodeURIComponent(`${process.env.WEB_HOST}/payment/payCompleted?orderID=` + that.weixinPayMsg.orderID);          location.href = res.data.data.mweb_url + ‘&redirect_url=‘ + encodeURIComponent(`${process.env.WEB_HOST}/prescription/prescription_order`);        }      });    },// 微信内请求支付    weixinPay(resData) {      let that = this;      console.log(‘进行微信内支付‘);      function onBrIDgeReady() {        /* eslint-disable */        WeixinjsBrIDge.invoke(          ‘getBranDWCPayRequest‘,{            ‘appID‘: resData.appID,//公众号名称，由商户传入            ‘timeStamp‘: resData.timestamp,//时间戳，自1970年以来的秒数            ‘nonceStr‘: resData.nonce_str,//随机串            ‘package‘: resData.package,//订单详情扩展字符串            // ‘signType‘: resData.signType,//微信签名方式            ‘signType‘: ‘MD5‘,‘paySign‘: resData.sign,//微信签名          },function (res) {            console.log(res);            if (res.err_msg === ‘get_brand_wcpay_request:ok‘) {              that.bgcolor = true;              Toast(‘付款成功‘);              // sessionStorage.removeItem(‘weixinPayMsg‘);              that.$router.push(‘/payment/paySuccess?orderID=‘ + that.weixinPayMsg.orderID);            }            else if (res.err_msg === ‘get_brand_wcpay_request:cancel‘) {              that.bgcolor = true;              Toast(‘付款取消‘);              that.$router.push(‘/payment/payError?openID=‘ + that.wxopenID);            } else {              that.bgcolor = true;              Toast(‘付款失败‘);              that.$router.push(‘/payment/payError?openID=‘ + that.wxopenID);            }          }        );      }      if (typeof WeixinjsBrIDge === ‘undefined‘) {        if (document.addEventListener) {          document.addEventListener(‘WeixinjsBrIDgeReady‘,onBrIDgeReady,false);        } else if (document.attachEvent) {          document.attachEvent(‘WeixinjsBrIDgeReady‘,onBrIDgeReady);          document.attachEvent(‘onWeixinjsBrIDgeReady‘,onBrIDgeReady);        }      } else {        onBrIDgeReady();      }    },// 查询订单状态    getorderState() {      console.log(‘查询订单状态参数‘,this.weixinPayMsg.orderID);      AJAX.get(‘/API/pay/GetorderStatus/‘ + this.weixinPayMsg.orderID).then(res => {        console.log(‘订单状态结果‘,res);        if (res.status === 200 && res.data.code === 0) {          this.orderState = res.data.data;          if (res.data.data === 1) {            sessionStorage.removeItem(‘weixinPayMsg‘);            Toast(‘订单付款成功‘);            this.$router.push(‘/prescription/prescription_detail?order_ID=‘ + this.weixinPayMsg.orderID);          }        }      });    },// 获取ip    getIP() {      this.spbill_create_ip = returnCitySN.cip;      console.log(‘获取ip‘,this.spbill_create_ip);    }  },created() {    let _self = this;    // 先判断是否是在微信内还是微信外的普通手机浏览器    this.liulanqi();    // 取出提交支付的参数    if (JsON.parse(sessionStorage.getItem(‘weixinPayMsg‘))) {      this.weixinPayMsg = JsON.parse(sessionStorage.getItem(‘weixinPayMsg‘));      console.log(‘取出提交支付的参数‘,this.weixinPayMsg);    }    // 查询订单状态    this.getorderState();    // 微信公众号支付 需要获取code    let code = getqueryString(‘code‘);    if(code){      wxJs.init(code).then((res) => {        console.log(‘微信‘,res.wxconfig);        if(res.wxconfig.openID){          sessionStorage.setItem(‘wxopenID‘,res.wxconfig.openID);        }        _self.wxopenID = res.wxconfig.openID;//openID        console.log(‘_self.wxopenID‘,_self.wxopenID);      });    };    // 获取ip    this.getIP();    // // 修改订单地址    // if (JsON.parse(sessionStorage.getItem(‘orderAddress‘))) {    //   let temData = JsON.parse(sessionStorage.getItem(‘orderAddress‘));    //   doctorAJAX.post(‘apI/Order/changeOrderAddress‘,temData).then(res => {    //     console.log(‘修改订单收货地址‘,res);    //     sessionStorage.removeItem(‘orderAddress‘);    //   });    // }  },};</script><style lang="less" scoped>.page{  position: absolute;  top: 44px;  left: 0px;  right: 0px;  bottom: 0px;  overflow: auto;  background: #fff;}.line{  height: 10px;  background-color: #f5f5f5;}.icon-Box{  display: flex;  justify-content: center;  align-items: center;  padding: 30px 0px;  .icon{    wIDth: 30px;    height: 30px;    margin-right: 5px;  }  .hint-tlt{    Font-size: 26px;  }}.hint-txt{  margin-bottom: 20px;  text-align: center;}.money-Box{  height: 40px;  line-height: 40px;  padding-left: 10px;  border-top: 1px solID #e6e6e6;}.pay-txt{  height: 40px;  line-height: 40px;  padding-left: 10px;  border-bottom: 1px solID #e6e6e6;}.payType{  height: 50px;  padding:0 10px;  border-bottom: 1px solID #e6e6e6;  display: flex;  align-items: center;  .payIcon{    wIDth: 30px;    height: 30px;    margin-right: 10px;  }  .payType-l{    height: 100%;    display: flex;    align-items: center;    flex: 1;  }  .typeIcon{    wIDth: 20px;    height: 20px;  }}.goPays{  margin: 0 10px;  margin-top: 40px;  height: 40px;  line-height: 40px;  text-align: center;  color: #ffffff;  background: rgb(12,205,211);}.goPays.huisi{  background: #ccc;}</style>

总结

以上是内存溢出为你收集整理的web前端支付功能全部内容，希望文章能够帮你解决web前端支付功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。