web前端支付功能

其他 2019-05-30 16:22:14 阅读次数: 0 
<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="icon-box">
        <img src="./imgs/money.png" alt="" class="icon">
        <div class="hint-tlt">等待付款</div>
      </div>
      <div class="hint-txt">订单已提交，请在点击确认支付。</div>
      <div class="money-box">订单金额：¥ {{weixinPayMsg.orderPrice}}</div>
      <div class="line"></div>
      <div class="pay-txt">选择支付方式</div>
      <div class="payType" v-if="this.payEnv != 'weixin'">
        <div class="payType-l">
          <img src="./imgs/icon-zhifubao.png" alt="" class="payIcon">
          <div>支付宝支付</div>
        </div>
        <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==1" class="typeIcon">
        <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(1)">
      </div>
      <div class="payType" v-if="this.payEnv != 'alipay'">
        <div class="payType-l">
          <img src="./imgs/icon-weixin.png" alt="" class="payIcon">
          <div>微信支付</div>
        </div>
        <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==2" class="typeIcon">
        <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(2)">
      </div>
      <div class="goPays" :class="bgColor?'': 'huisi'" @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, // 商品：product 处方：prescription, 脉诊仪: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, // 支付类型
          OrderId: this.weixinPayMsg.orderId, // 订单号
          PayFee: this.weixinPayMsg.orderPrice, // 付款金额
          Category: this.weixinPayMsg.Category, // 商品：product 处方：prescription, 脉诊仪: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.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, // 商品：product 处方：prescription, 脉诊仪: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, // 支付类型
            OrderId: this.weixinPayMsg.orderId, // 订单号
            PayFee: this.weixinPayMsg.orderPrice, // 付款金额
            spbill_create_ip: this.spbill_create_ip,
            OpenId: '', // 公众号、小程序必传
            Category: this.weixinPayMsg.Category, // 商品：product 处方：prescription, 脉诊仪:jinmu
            StoreName: this.weixinPayMsg.StoreName, // 药店名称 已兼容旧版本
          };
          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>

猜你喜欢

转载自www.cnblogs.com/yangzhenhong/p/10950145.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022